Fix popups drag issue when selecting input values (#67)

When trying to select input values (by dragging the cursor) inside list
and timing popup, the popup cdkDrag will be disabled, ensuring that the
select event does not cause dragging of the popup.

Author: kaur-mananjeet

script-gen-ui/src/app/components/main-sweep/list/list.component.html

@@ -1,4 +1,4 @@
-<div #listPopUp class="sweep-list-popup" cdkDrag cdkDragBoundary="body">
+<div #listPopUp class="sweep-list-popup" cdkDrag cdkDragBoundary="body" [cdkDragDisabled]="isDragDisabled">
   <div class="sweep-list-popup-content">
     <div class="sweep-list-popup-header" cdkDragHandle>
       <h3 style="margin: 0">List</h3>
@@ -14,6 +14,9 @@ <h3 style="margin: 0">List</h3>
           *ngIf="noOfPointsOrSteps !== undefined && noOfPointsOrSteps !== null"
           (inputChange)="emitStepsOrPoints()"
           [disabled]="!isNoOfPointsOrSteps"
+          (mousedown)="onInputMouseDown()"
+          (mouseup)="onInputMouseUp()"
+          (blur)="onInputBlur()"
         ></app-input-numeric>
       </div>
       <div class="sweep-list-popup-inputs">
@@ -42,6 +45,9 @@ <h3 style="margin: 0">List</h3>
                   (inputChange)="onChange()"
                   style="width: 95%"
                   [disabled]="!sweep.isDeviceValid"
+                  (mousedown)="onInputMouseDown()"
+                  (mouseup)="onInputMouseUp()"
+                  (blur)="onInputBlur()"
                 ></app-input-plain>
               </td>
             </tr>

script-gen-ui/src/app/components/main-sweep/list/list.component.ts

@@ -49,6 +49,7 @@ export class ListComponent implements OnChanges, AfterViewInit {
   @Output() updatedStepsOrPoints = new EventEmitter<number>();
 
   rowIndices: number[] = [];
+  isDragDisabled = false;
 
   getRowIndices(): number[] {
     return this.listsWithNames.length > 0
@@ -97,4 +98,22 @@ export class ListComponent implements OnChanges, AfterViewInit {
       this.listPositionChange.emit({ left: rect.left, top: rect.top });
     }
   }
+
+  onInputBlur() {
+    this.isDragDisabled = false;
+  }
+
+  onInputMouseDown() {
+    this.isDragDisabled = true;
+    
+    setTimeout(() => {
+      if (this.isDragDisabled) {
+        this.isDragDisabled = false;
+      }
+    }, 500);
+  }
+
+  onInputMouseUp() {
+    this.isDragDisabled = false;
+  }
 }

script-gen-ui/src/app/components/main-sweep/timing/timing.component.html

@@ -1,5 +1,5 @@
 <div class="popup">
-  <div class="popup-content" cdkDrag cdkDragBoundary="body">
+  <div class="popup-content" cdkDrag cdkDragBoundary="body" [cdkDragDisabled]="isDragDisabled">
     <!-- <span class="close" (click)="close_Timing()">&times;</span> -->
     <div>
       <div class="popup-header" cdkDragHandle>
@@ -16,6 +16,9 @@ <h3 id="timingLabel">Timing</h3>
           [label]="'Measure Count (per step)'"
           *ngIf="measureCount"
           (inputChange)="submitTimingData()"
+          (mousedown)="onInputMouseDown()"
+          (mouseup)="onInputMouseUp()"
+          (blur)="onInputBlur()"
           ></app-input-numeric>
         </div>
 
@@ -42,6 +45,9 @@ <h3 id="SMUTimingLabel">SMU Timing</h3>
           [label]="'NPLC'"
           *ngIf="nplc"
           (inputChange)="submitTimingData()"
+          (mousedown)="onInputMouseDown()"
+          (mouseup)="onInputMouseUp()"
+          (blur)="onInputBlur()"
         ></app-input-numeric>
       </div>
       <div *ngIf="nplcType?.value === 'Aperture'">
@@ -52,6 +58,9 @@ <h3 id="SMUTimingLabel">SMU Timing</h3>
           [unit]="aperture.unit"
           *ngIf="aperture"
           (inputChange)="submitTimingData()"
+          (mousedown)="onInputMouseDown()"
+          (mouseup)="onInputMouseUp()"
+          (blur)="onInputBlur()"
         ></app-input-plain>
       </div>
       <div>
@@ -73,6 +82,9 @@ <h3 id="SMUTimingLabel">SMU Timing</h3>
           [unit]="sourceDelay.unit"
           *ngIf="sourceDelay"
           (inputChange)="submitTimingData()"
+          (mousedown)="onInputMouseDown()"
+          (mouseup)="onInputMouseUp()"
+          (blur)="onInputBlur()"
         ></app-input-plain>
       </div>
       <div>
@@ -94,6 +106,9 @@ <h3 id="SMUTimingLabel">SMU Timing</h3>
           [unit]="measureDelay.unit"
           *ngIf="measureDelay"
           (inputChange)="submitTimingData()"
+          (mousedown)="onInputMouseDown()"
+          (mouseup)="onInputMouseUp()"
+          (blur)="onInputBlur()"
         ></app-input-plain>
       </div>
     </div>

script-gen-ui/src/app/components/main-sweep/timing/timing.component.ts

@@ -61,6 +61,8 @@ export class TimingComponent implements OnDestroy, OnChanges {
 
   boundaryElement = 'app-root';
 
+  isDragDisabled = false;
+
   @Input() sweepTimingConfig: SweepTimingConfig | undefined;
   @Output() ok = new EventEmitter<void>();
   @Output() emitTimingData = new EventEmitter<void>();
@@ -129,6 +131,24 @@ export class TimingComponent implements OnDestroy, OnChanges {
     });
   }
 
+  onInputBlur() {
+    this.isDragDisabled = false;
+  }
+
+  onInputMouseDown() {
+    this.isDragDisabled = true;
+    
+    setTimeout(() => {
+      if (this.isDragDisabled) {
+        this.isDragDisabled = false;
+      }
+    }, 500);
+  }
+
+  onInputMouseUp() {
+    this.isDragDisabled = false;
+  }
+
   ngOnDestroy(): void {
     console.log('component destroyed');
   }