fix: add arrowdown handler #160 #161

source/components/form/select.mjs

@@ -23,7 +23,7 @@ import { CustomControl } from "../../dom/customcontrol.mjs";
 import {
     assembleMethodSymbol,
     getSlottedElements,
-	registerCustomElement,
+    registerCustomElement, updaterTransformerMethodsSymbol,
 } from "../../dom/customelement.mjs";
 import {
     findTargetElementFromEvent,
@@ -371,7 +371,8 @@ class Select extends CustomControl {
         const result = convertValueToSelection.call(this, value);
         setSelection
             .call(this, result.selection)
-			.then(() => {})
+            .then(() => {
+            })
             .catch((e) => {
                 addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
             });
@@ -538,7 +539,8 @@ class Select extends CustomControl {
                             }
 
                             result
-								.then(() => {})
+                                .then(() => {
+                                })
                                 .catch((e) => {
                                     addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
                                 });
@@ -565,7 +567,8 @@ class Select extends CustomControl {
                         lastValue = n;
                         setSelection
                             .call(self, n)
-							.then(() => {})
+                            .then(() => {
+                            })
                             .catch((e) => {
                                 addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
                             });
@@ -1010,6 +1013,15 @@ function handleToggleKeyboardEvents(event) {
             toggle.call(this);
             event.preventDefault();
             break;
+        case "ArrowDown":
+            show.call(this);
+            activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+            event.preventDefault();
+            break;
+        case "ArrowUp":
+            hide.call(this);
+            event.preventDefault();
+            break;
     }
 }
 
@@ -1027,10 +1039,12 @@ function initOptionObserver() {
             new Processing(() => {
                 try {
                     self.updateI18n();
-				} catch (e) {}
+                } catch (e) {
+                }
                 try {
                     areOptionsAvailableAndInit.call(self);
-				} catch (e) {}
+                } catch (e) {
+                }
 
                 setSummaryAndControlText.call(self);
             }).run();
@@ -1046,7 +1060,8 @@ function getDefaultTranslation() {
     try {
         const doc = getDocumentTranslations();
         translation.locale = doc.locale;
-	} catch (e) {}
+    } catch (e) {
+    }
 
     return translation;
 }
@@ -1239,9 +1254,9 @@ function activateCurrentOption(direction) {
                 }
             }
         } else {
+            let found = false;
             while (focused.previousSibling) {
                 focused = focused.previousSibling;
-
                 if (
                     focused instanceof HTMLElement &&
                     focused.hasAttribute(ATTRIBUTE_ROLE) &&
@@ -1249,9 +1264,15 @@ function activateCurrentOption(direction) {
                     focused.matches("[data-monster-visibility=visible]") &&
                     focused.matches(":not([data-monster-filtered=true])")
                 ) {
+                    found = true;
                     break;
                 }
             }
+            if (found === false) {
+                console.log("not found");
+                console.log(this.focus());
+                focusFilter.call(this);
+            }
         }
     }
 
@@ -1266,7 +1287,9 @@ function activateCurrentOption(direction) {
             focused.focus();
             focused.setAttribute(`${ATTRIBUTE_PREFIX}focused`, true);
         }
-	}).run();
+    }).run().catch((e) => {
+        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+    });
 }
 
 /**
@@ -1617,7 +1640,8 @@ function gatherState() {
 
     setSelection
         .call(this, selection)
-		.then(() => {})
+        .then(() => {
+        })
         .catch((e) => {
             addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
         });
@@ -1646,7 +1670,8 @@ function clearSelection() {
 
     setSelection
         .call(this, [])
-		.then(() => {})
+        .then(() => {
+        })
         .catch((e) => {
             addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
         });
@@ -1910,7 +1935,7 @@ function setSelection(selection) {
  * @throws {TypeError} the result cannot be parsed
  * @throws {TypeError} unsupported response
  */
-function fetchData(url) {;
+function fetchData(url) {
 
     if (!url) url = this.getOption("url");
     if (!url) return Promise.resolve();
@@ -1957,7 +1982,7 @@ function hide() {
 /**
  * @private
  */
-function show() {;
+function show() {
 
     if (this.getOption("disabled", undefined) === true) {
         return;
@@ -2008,8 +2033,6 @@ function show() {;
 
         return;
     }
-	//debugger
-	//const optionsAvailable = areOptionsAvailableAndInit.call(this);
 
     this[popperElementSymbol].style.visibility = "hidden";
     this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
@@ -2234,7 +2257,8 @@ function initEventHandler() {
  * @private
  * @return {Select}
  */
-function setStatusOrRemoveBadges(suggestion) {;
+function setStatusOrRemoveBadges(suggestion) {
+
     setTimeout(() => {
         const selection = this.getOption("selection");
         const clearAllFlag =
@@ -2378,7 +2402,8 @@ function getTemplate() {
             part path:type | prefix:option- | suffix: form,
             class path:options.class 
             " tabindex="-1">
-                    <div data-monster-replace="path:options | index:label" part="option-label"></div>
+                    <div data-monster-replace="path:options | index:label | call:my-callback-doing"
+                         part="option-label"></div>
                 </label>
             </div>
         </template>