@penn-libraries/web 1.1.0-dev.6 → 1.1.0-dev.7

package/dist/cjs/pennlibs-autocomplete_3.cjs.entry.js

@@ -12,6 +12,12 @@ const Autocomplete = class {
         this.currentIndex = -1;
         this.originalValue = '';
         this.options = [];
+        this.keyHandlerMap = {
+            'Escape': () => this.handleEscape(),
+            'ArrowDown': () => this.handleArrowDown(),
+            'ArrowUp': () => this.handleArrowUp(),
+            'Enter': () => this.handleEnter()
+        };
         this.handleOptionClick = (index) => {
             this.currentIndex = index;
             this.selectCurrent();
@@ -63,7 +69,12 @@ const Autocomplete = class {
         if (!this.for)
             return null;
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
-        const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
+        if (!slot)
+            return null;
+        const assignedElements = slot.assignedElements();
+        if (assignedElements.length === 0)
+            return null;
+        const input = assignedElements[0].querySelector(`input#${this.for}`);
         return input || null;
     }
     isInputFocused() {
@@ -122,35 +133,33 @@ const Autocomplete = class {
             return;
         if (event.metaKey || event.ctrlKey)
             return; // Ignore keyboard shortcuts
-        const handler = this.keyHandlers()[event.key];
+        const handler = this.keyHandlerMap[event.key];
         if (handler) {
-            event.preventDefault();
+            // Don't prevent default for Enter - allow form submission
+            if (event.key !== 'Enter') {
+                event.preventDefault();
+            }
             handler();
         }
     }
-    keyHandlers() {
-        return {
-            'Escape': () => this.handleEscape(),
-            'ArrowDown': () => this.handleArrowDown(),
-            'ArrowUp': () => this.handleArrowUp(),
-            'Enter': () => this.handleEnter()
-        };
-    }
     handleEscape() {
         this.reset();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleArrowDown() {
         if (!this.showSuggestions)
             return;
         this.moveNext();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleArrowUp() {
         if (!this.showSuggestions)
             return;
         this.movePrevious();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleEnter() {
         if (this.canSelect())
@@ -190,7 +199,6 @@ const Autocomplete = class {
         if (input)
             this.originalValue = input.value;
         this.showSuggestionsPanel();
-        this.syncInputState();
     }
     showSuggestionsPanel() {
         this.showSuggestions = true;
@@ -199,8 +207,11 @@ const Autocomplete = class {
     closeSuggestions() {
         this.reset();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     deferCloseSuggestions() {
+        if (this.blurTimeout)
+            clearTimeout(this.blurTimeout);
         this.blurTimeout = setTimeout(() => {
             if (this.isFocusOutsideComponent())
                 this.closeSuggestions();
@@ -227,30 +238,34 @@ const Autocomplete = class {
             return;
         this.updateAriaExpanded(input);
         this.updateAriaActiveDescendant(input);
-        this.updateInputValue(input);
+    }
+    syncInputValueToSelection() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length
+            ? this.options[this.currentIndex].value
+            : this.originalValue;
     }
     updateAriaExpanded(input) {
         input.setAttribute('aria-expanded', this.showSuggestions.toString());
     }
     updateAriaActiveDescendant(input) {
-        const hasSelection = this.showSuggestions && this.currentIndex >= 0;
-        if (hasSelection && this.options[this.currentIndex]) {
+        const hasSelection = this.showSuggestions &&
+            this.currentIndex >= 0 &&
+            this.currentIndex < this.options.length;
+        if (hasSelection) {
             input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);
         }
         else {
             input.removeAttribute('aria-activedescendant');
         }
     }
-    updateInputValue(input) {
-        input.value = this.currentIndex >= 0
-            ? this.options[this.currentIndex].value
-            : this.originalValue;
-    }
     shouldShowListbox() {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (index.h("div", { key: '71422b55533372a9d8697e648e49f87fe223f4e0' }, index.h("slot", { key: '951511fd2090b9816c2e6c1a5a40169ea08e72fd', name: "start" }), this.shouldShowListbox() && (index.h("ol", { key: 'e3f6f14686bc99b6e25d34d8e053f01174f23438', role: "listbox", id: "listbox" }, this.options.map((option, index$1) => (index.h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index$1 ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index$1), innerHTML: option.html })))))));
+        return (index.h("div", { key: 'd7c11d48e354937eedc76f608ef3b3b8762ddb4b' }, index.h("slot", { key: 'a3c65cf477aa9f575c3310e364c1dd2a5dca9e57', name: "start" }), this.shouldShowListbox() && (index.h("ol", { key: 'dc035d276f14da3ad0246924c345bc86ff5c68f9', role: "listbox", id: "listbox" }, this.options.map((option, index$1) => (index.h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index$1 ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index$1), innerHTML: option.html })))))));
     }
     get el() { return index.getElement(this); }
 };