Merge pull request #22 from perehinik/3-add-tests-for-dropdownarrow

Add tests for DropDownArrow.
perehinik · Sep 15, 2023 · 7c974fd · 7c974fd
2 parents 46703da + 2011753
commit 7c974fd
Show file tree

Hide file tree

Showing 2 changed files with 386 additions and 31 deletions.
diff --git a/src/ToolsPanel/Inputs/DropDownArrow.ts b/src/ToolsPanel/Inputs/DropDownArrow.ts
@@ -56,19 +56,44 @@ export class DropDownArrow {
         this.onDocClickHandler = this.onDocClickHandler.bind(this);
         this.onDropDownMouseEvent = this.onDropDownMouseEvent.bind(this);
 
+        // Arrow mousedown should propagate, click shouldn't
         this.arrowButton.onmousedown = (ev) => {ev.preventDefault();};
         this.arrowButton.addEventListener("click", this.onClickHandler, false);
         this.Element.onmousedown = this.onDropDownMouseEvent;
         document.addEventListener("click", this.onDocClickHandler, false);
         this.dropDownContainer.addEventListener("click", this.onDropDownMouseEvent, false)
     }
 
+    /**
+     * Calback for button click event.
+     *
+     * @param ev - Mouse event.
+     */
+    onClickHandler(ev: MouseEvent): void {
+        this.setState(!this.state);
+        ev.stopPropagation();
+    }
+
+    /**
+     * Calback for click on document outside button and dropdown.
+     * Used to close dropdown.
+     *
+     * @param ev - Mouse event.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDocClickHandler(ev?: MouseEvent): void {
+        if (this.state) {
+            this.setState(false);
+        }
+    }
+
     /**
      * Disables event propagation for events which were initialized inside dropdown container.
      */
     onDropDownMouseEvent(ev: MouseEvent | TouchEvent): void {
         if (!this.hideDropDownOnClick) {
-            if (!(ev.target as Node)?.nodeName || (ev.target as Node)?.nodeName !== "INPUT") {
+            if (!(ev.target as Node)?.nodeName || (ev.target as Node)?.nodeName.toUpperCase() !== "INPUT") {
+                // For inputs mousedown should be default to enable interaction like slider movement.
                 ev.preventDefault()
             }
             ev.stopPropagation();
@@ -135,29 +160,6 @@ export class DropDownArrow {
         return dropDownContainer;
     }
 
-    /**
-     * Calback for button click event.
-     *
-     * @param ev - Mouse event.
-     */
-    onClickHandler(ev: MouseEvent): void {
-        this.setState(!this.state);
-        ev.stopPropagation();
-    }
-
-    /**
-     * Calback for click on document outside button and dropdown.
-     * Used to close dropdown.
-     *
-     * @param ev - Mouse event.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDocClickHandler(ev?: MouseEvent): void {
-        if (this.state) {
-            this.setState(false);
-        }
-    }
-
     /**
      * Set button state without firing button state update callback.
      *
@@ -181,19 +183,19 @@ export class DropDownArrow {
      */
     adjustPosition(): void {
         const elRect = this.dropDownContainer.getBoundingClientRect();
-        let elWidth = elRect.right - elRect.left;
-        elWidth = elWidth != 0 ? elWidth : this.dropDownWidth;
+        const elWidth = elRect.width != 0 ? elRect.width : this.dropDownWidth;
         this.dropDownWidth = elWidth;
 
         const btRect = this.dropDownAnchor.getBoundingClientRect();
-        const btWidth = btRect.right - btRect.left;
-        const docWidth = document.body.getBoundingClientRect().right;
-        const btPos = btRect.left + (btRect.right - btRect.left) / 2
+        const docWidth = document.body.getBoundingClientRect().width;
+        const btPos = btRect.left + btRect.width / 2
 
         let left = 0;
-        const top = btRect.bottom - btRect.top + 10
+        const top = btRect.height + 10
         const expectedRightPos = btPos + elWidth / 2;
-        if (expectedRightPos + 5 <= docWidth) { left = -elWidth / 2 + btWidth / 2; }
+        const expectedLeftPos = btPos - elWidth / 2;
+        if (expectedLeftPos < 5) { left = -btPos + 5;}
+        else if (expectedRightPos + 5 <= docWidth) { left = -elWidth / 2 + btRect.width / 2; }
         else { left = docWidth - btRect.left - elWidth - 5; }
         left += this.dropdownLeft;