Styles for list box: position and scroll blocking

elsci-io · Aug 13, 2024 · fcd54d5 · fcd54d5
1 parent 54658e2
commit fcd54d5
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elsci-io/ui-essential",
-  "version": "1.0.65",
+  "version": "1.0.66",
   "description": "Material Design components created for products built by elsci.io",
   "main": "src/index.js",
   "type": "module",

diff --git a/src/ListBox/ListBox.js b/src/ListBox/ListBox.js
@@ -10,6 +10,7 @@ export default class ListBox extends HTMLElement {
     #callbacks = {
         onOptionClick: []
     }
+    #preventScrollFunction;
 
     /**
      * @returns {{displayName:string}[]}
@@ -55,12 +56,14 @@ export default class ListBox extends HTMLElement {
     }
 
     show() {
-        this.style.display = 'block';
+        document.addEventListener("wheel", this.#preventScrollFunction, {capture: true, passive: false});
+        this.toggleAttribute('open', true)
         this.#updatePosition();
     }
 
     hide() {
-        this.style.display = 'none';
+        document.removeEventListener("wheel", this.#preventScrollFunction, {capture: true, passive: false});
+        this.toggleAttribute('open', false)
         this.#resetCurrentSelection();
     }
 
@@ -102,7 +105,7 @@ export default class ListBox extends HTMLElement {
     }
 
     isVisible() {
-        return window.getComputedStyle(this).display !== 'none'
+        return this.hasAttribute('open')
     }
 
     onOptionClick(cb) {
@@ -113,6 +116,26 @@ export default class ListBox extends HTMLElement {
         this.innerHTML = this.#htmlTemplate();
         this.#listElement = this.querySelector("ul");
         this.#addListeners();
+        // This function is needed to stop scrolling all page, except of list-box
+        // Otherwise select and typeahead inputs can be scrolled, but list-box fixed in the page
+        this.#preventScrollFunction = (evt)=> {
+            if (!this.contains(evt.target)) {
+                // When scrolling outside the list-box
+                evt.stopPropagation();
+                evt.preventDefault();
+            } else {
+                const isScrollingUp = evt.deltaY < 0;
+                const isScrollingDown = evt.deltaY > 0;
+                const isListScrolledToItsTop = this.#listElement.scrollTop === 0;
+                const isListScrolledToItsBottom = this.#listElement.scrollTop + this.#listElement.clientHeight >= this.#listElement.scrollHeight;
+                const nothingToScrollUp = isScrollingUp & isListScrolledToItsTop;
+                const nothingToScrollDown = isScrollingDown & isListScrolledToItsBottom;
+                if (nothingToScrollUp || nothingToScrollDown){
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                }
+            }
+        };
     }
 
     /**
@@ -167,6 +190,8 @@ export default class ListBox extends HTMLElement {
             this.#listElement.style.right = null;
         }
         this.#listElement.style.width = `${Math.min(widthToBe, document.documentElement.clientWidth)}px`;
+        this.style.width = `${Math.min(widthToBe, document.documentElement.clientWidth)}px`;
+        this.style.top = `${parentClientRect.top}px`;
     }
 
     #getSelectedElement() {

diff --git a/src/SelectInput/SelectInput.scss b/src/SelectInput/SelectInput.scss
@@ -6,8 +6,15 @@ select-input {
 
 select-input list-box {
     display: none;
-    margin-top: -0.875rem;
-    position: relative;
+    margin-top: 3rem;
+    // We use a fixed position because we want to specify the location ourselves (related to the browser window,
+    // not closest positioned relative)
+    position: fixed;
+    z-index: 9;
+}
+
+select-input list-box[open] {
+    display: block;
 }
 
 select-input text-input {

diff --git a/src/TypeAheadInput/TypeAheadInput.scss b/src/TypeAheadInput/TypeAheadInput.scss
@@ -6,8 +6,15 @@ typeahead-input {
 
 typeahead-input list-box {
     display: none;
-    margin-top: -0.825rem;
-    position: relative;
+    margin-top: 3rem;
+    // We use a fixed position because we want to specify the location ourselves (related to the browser window,
+    // not closest positioned relative)
+    position: fixed;
+    z-index: 9;
+}
+
+typeahead-input list-box[open] {
+    display: block;
 }
 
 typeahead-input.dropdown-select text-input .text-input__input {