Adding the focus() function to MuchSelect.

Add an example that shows how to call `focus()`, which will focus the `<much-select>`.
DripEmail · Dec 11, 2023 · 7da199d · 7da199d
1 parent a28a7d2
commit 7da199d
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 23 deletions.
diff --git a/dist/much-select-debug.js b/dist/much-select-debug.js
@@ -38,7 +38,9 @@ const buildOptionsFromSelectElement = (selectElement) => {
       value = optionElement.innerText;
     }
     const option = { value };
-    if (optionElement.hasAttribute("id")) {
+    if (optionElement.hasAttribute("data-part")) {
+      option.part = optionElement.getAttribute("data-part").trim();
+    } else if (optionElement.hasAttribute("id")) {
       option.part = optionElement.getAttribute("id").trim();
     } else {
       option.part = dasherize(option.value.trim());
@@ -610,13 +612,7 @@ class MuchSelect extends HTMLElement {
       app.ports.focusInput.subscribe(() => {
         // This port is here because we need to be able to call the focus method
         //  which is something we can not do from inside Elm.
-        window.requestAnimationFrame(() => {
-          const inputFilterElement =
-            this.shadowRoot.getElementById("input-filter");
-          if (inputFilterElement) {
-            this.shadowRoot.getElementById("input-filter").focus();
-          }
-        });
+        this.focus();
       }),
     );
 
@@ -1998,6 +1994,15 @@ class MuchSelect extends HTMLElement {
       }
     });
   }
+
+  focus() {
+    window.requestAnimationFrame(() => {
+      const inputFilterElement = this.shadowRoot.getElementById("input-filter");
+      if (inputFilterElement) {
+        this.shadowRoot.getElementById("input-filter").focus();
+      }
+    });
+  }
 }
 
 // noinspection JSUnusedGlobalSymbols

diff --git a/dist/much-select.js b/dist/much-select.js
@@ -38,7 +38,9 @@ const buildOptionsFromSelectElement = (selectElement) => {
       value = optionElement.innerText;
     }
     const option = { value };
-    if (optionElement.hasAttribute("id")) {
+    if (optionElement.hasAttribute("data-part")) {
+      option.part = optionElement.getAttribute("data-part").trim();
+    } else if (optionElement.hasAttribute("id")) {
       option.part = optionElement.getAttribute("id").trim();
     } else {
       option.part = dasherize(option.value.trim());
@@ -610,13 +612,7 @@ class MuchSelect extends HTMLElement {
       app.ports.focusInput.subscribe(() => {
         // This port is here because we need to be able to call the focus method
         //  which is something we can not do from inside Elm.
-        window.requestAnimationFrame(() => {
-          const inputFilterElement =
-            this.shadowRoot.getElementById("input-filter");
-          if (inputFilterElement) {
-            this.shadowRoot.getElementById("input-filter").focus();
-          }
-        });
+        this.focus();
       }),
     );
 
@@ -1998,6 +1994,15 @@ class MuchSelect extends HTMLElement {
       }
     });
   }
+
+  focus() {
+    window.requestAnimationFrame(() => {
+      const inputFilterElement = this.shadowRoot.getElementById("input-filter");
+      if (inputFilterElement) {
+        this.shadowRoot.getElementById("input-filter").focus();
+      }
+    });
+  }
 }
 
 // noinspection JSUnusedGlobalSymbols

diff --git a/examples/focus-on-demand.html b/examples/focus-on-demand.html
@@ -0,0 +1,23 @@
+<div id="focus-on-demand">
+  <h3>Single Select - <code>blurOrUnfocusedValueChanged</code> Event</h3>
+  <much-select>
+    <select slot="select-input">
+      <option value="111">Grass Pea</option>
+      <option value="222">Velvet Bean</option>
+      <option value="333">Sword Bean</option>
+      <option value="444">Soybean</option>
+    </select>
+  </much-select>
+  <br>
+  <button>Focus 👀</button>
+
+  <script>
+    window.addEventListener("load", () => {
+      document
+        .querySelector("#focus-on-demand button")
+        .addEventListener("click", () => {
+          document.querySelector("#focus-on-demand much-select").focus();
+        });
+    });
+  </script>
+</div>
diff --git a/site/events.html b/site/events.html
@@ -64,6 +64,10 @@ <h3>Demo and Development Playground</h3>
     <div class="example">
       <div id="single-select-blur-or-unfocused-value-change"></div>
     </div>
+
+    <div class="example">
+      <div id="focus-on-demand"></div>
+    </div>
   </div>
 
   <footer></footer>

diff --git a/soupault.toml b/soupault.toml
@@ -299,6 +299,11 @@ widget = "include"
 file = "examples/events-only-mode.html"
 selector = ".example #events-only-mode"
 
+[widgets.focus-on-dedmand]
+widget = "include"
+file = "examples/focus-on-demand.html"
+selector = ".example #focus-on-demand"
+
 [widgets.hidden-input-json-encoding-slot]
 widget = "include"
 file = "examples/hidden-input-json-encoding-slot.html"

diff --git a/src/much-select.js b/src/much-select.js
@@ -610,13 +610,7 @@ class MuchSelect extends HTMLElement {
       app.ports.focusInput.subscribe(() => {
         // This port is here because we need to be able to call the focus method
         //  which is something we can not do from inside Elm.
-        window.requestAnimationFrame(() => {
-          const inputFilterElement =
-            this.shadowRoot.getElementById("input-filter");
-          if (inputFilterElement) {
-            this.shadowRoot.getElementById("input-filter").focus();
-          }
-        });
+        this.focus();
       }),
     );
 
@@ -1998,6 +1992,15 @@ class MuchSelect extends HTMLElement {
       }
     });
   }
+
+  focus() {
+    window.requestAnimationFrame(() => {
+      const inputFilterElement = this.shadowRoot.getElementById("input-filter");
+      if (inputFilterElement) {
+        this.shadowRoot.getElementById("input-filter").focus();
+      }
+    });
+  }
 }
 
 // noinspection JSUnusedGlobalSymbols