@ship-ui/core 0.15.23 → 0.15.24

package/fesm2022/ship-ui-core.mjs

@@ -3593,6 +3593,7 @@ function observeChildren(parentEl, elementTags) {
 
 class ShipMenuComponent {
     constructor() {
+        this.#document = inject(DOCUMENT);
         this.#renderer = inject(Renderer2);
         this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : []));
         this.openIndicator = input(false, ...(ngDevMode ? [{ debugName: "openIndicator" }] : []));
@@ -3611,17 +3612,26 @@ class ShipMenuComponent {
         this.inputValue = createInputSignal(this.inputRef);
         this.abortController = null;
         this.optionsEffect = effect(() => {
-            if (!this.isOpen())
-                return;
-            if (this.abortController) {
+            if (this.abortController !== null) {
                 this.abortController.abort();
                 this.abortController = null;
             }
+            if (!this.isOpen())
+                return;
             this.abortController = new AbortController();
+            const searchable = this.searchable();
+            if (!searchable) {
+                this.#document.documentElement.addEventListener('keydown', this.keyDownEventListener, {
+                    signal: this.abortController.signal,
+                });
+            }
             const inputEl = this.inputRef()?.nativeElement;
             if (!inputEl)
                 return;
             queueMicrotask(() => inputEl.focus());
+            inputEl.addEventListener('keydown', this.keyDownEventListener, {
+                signal: this.abortController.signal,
+            });
             if (!this.closeOnClick()) {
                 const optionRef = this.optionsRef()?.nativeElement;
                 optionRef?.addEventListener('click', (e) => {
@@ -3639,31 +3649,29 @@ class ShipMenuComponent {
                     }
                 });
             }
-            inputEl.addEventListener('keydown', (e) => {
-                const activeOptionIndex = this.activeOptionIndex();
-                if (e.key === 'ArrowDown') {
-                    e.preventDefault();
-                    this.activeOptionIndex.set(this.nextActiveIndex(activeOptionIndex));
-                }
-                else if (e.key === 'ArrowUp') {
-                    e.preventDefault();
-                    this.activeOptionIndex.set(this.prevActiveIndex(activeOptionIndex));
-                }
-                else if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (activeOptionIndex > -1) {
-                        this.activeElements()[activeOptionIndex].click();
-                        queueMicrotask(() => this.close('active'));
-                    }
-                }
-                else if (e.key === 'Tab') {
-                    e.preventDefault();
-                    this.close('closed');
-                }
-            }, {
-                signal: this.abortController.signal,
-            });
         }, ...(ngDevMode ? [{ debugName: "optionsEffect" }] : []));
+        this.keyDownEventListener = (e) => {
+            const activeOptionIndex = this.activeOptionIndex();
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.activeOptionIndex.set(this.nextActiveIndex(activeOptionIndex));
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.activeOptionIndex.set(this.prevActiveIndex(activeOptionIndex));
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (activeOptionIndex > -1) {
+                    this.activeElements()[activeOptionIndex].click();
+                    queueMicrotask(() => this.close('active'));
+                }
+            }
+            else if (e.key === 'Tab') {
+                e.preventDefault();
+                this.close('closed');
+            }
+        };
         this._lastElementList = [];
         this.activeElements = signal([], ...(ngDevMode ? [{ debugName: "activeElements" }] : []));
         this.lastInputValue = '';
@@ -3673,6 +3681,15 @@ class ShipMenuComponent {
                 return;
             const inputValue = (this.inputValue() ?? '').toLowerCase();
             this.#resetActiveOption();
+            if (!inputValue || inputValue === '') {
+                const allOptions = this.optionsEl();
+                this.activeElements.set(allOptions);
+                this._lastElementList = allOptions;
+                for (let i = 0; i < allOptions.length; i++) {
+                    this.#renderer.removeStyle(allOptions[i], 'order');
+                }
+                return;
+            }
             if (!inputValue || inputValue === '')
                 return;
             let optionElements = this._lastElementList.length && inputValue.length > this.lastInputValue.length
@@ -3706,6 +3723,7 @@ class ShipMenuComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "activeOptionIndexEffect" }] : []));
     }
+    #document;
     #renderer;
     toggleIsOpen(event) {
         event.preventDefault();