@ship-ui/core 0.15.14 → 0.15.16

package/fesm2022/ship-ui-core.mjs

@@ -1038,56 +1038,62 @@ class ShipPopoverComponent {
             ...this.options(),
         }), ...(ngDevMode ? [{ debugName: "defaultOptionMerge" }] : []));
         this.triggerRef = viewChild.required('triggerRef');
-        this.popoverRef = viewChild.required('popoverRef');
+        this.popoverRef = viewChild('popoverRef', ...(ngDevMode ? [{ debugName: "popoverRef" }] : []));
         this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
         this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : []));
         this.openAbort = null;
         this.openEffect = effect(() => {
-            const popoverEl = this.popoverRef()?.nativeElement;
             const open = this.isOpen();
-            if (open) {
-                if (this.openAbort) {
-                    this.openAbort.abort();
-                }
-                this.openAbort = new AbortController();
-                const abortOptions = {
-                    signal: this.openAbort?.signal,
-                };
-                popoverEl?.showPopover();
-                this.#document.addEventListener('keydown', (e) => {
-                    if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
-                        e.preventDefault();
+            queueMicrotask(() => {
+                const popoverEl = this.popoverRef()?.nativeElement;
+                if (!popoverEl)
+                    return;
+                if (open) {
+                    if (this.openAbort) {
+                        this.openAbort.abort();
                     }
-                    if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
-                        this.isOpen.set(false);
+                    this.openAbort = new AbortController();
+                    const abortOptions = {
+                        signal: this.openAbort?.signal,
+                    };
+                    this.#document.addEventListener('keydown', (e) => {
+                        if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
+                            e.preventDefault();
+                        }
+                        if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
+                            this.isOpen.set(false);
+                        }
+                    }, abortOptions);
+                    popoverEl.showPopover();
+                    if (!this.SUPPORTS_ANCHOR) {
+                        setTimeout(() => {
+                            const scrollableParent = this.#findScrollableParent(popoverEl);
+                            scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), abortOptions);
+                            window?.addEventListener('resize', () => this.#calculateMenuPosition(), abortOptions);
+                            this.#calculateMenuPosition();
+                        });
                     }
-                }, abortOptions);
-                setTimeout(() => {
-                    const scrollableParent = this.#findScrollableParent(this.popoverRef()?.nativeElement);
-                    scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), abortOptions);
-                    window?.addEventListener('resize', () => this.#calculateMenuPosition(), abortOptions);
-                    this.#calculateMenuPosition();
-                });
-            }
-            else {
-                popoverEl.hidePopover && popoverEl.hidePopover();
-                this.openAbort?.abort();
-                this.closed.emit();
-            }
+                }
+                else {
+                    this.closed.emit();
+                    this.openAbort?.abort();
+                    this.openAbort = null;
+                }
+            });
         }, ...(ngDevMode ? [{ debugName: "openEffect" }] : []));
     }
     #document;
     #BASE_SPACE;
     toggleIsOpen(event) {
-        event.preventDefault();
-        event.stopPropagation();
         if (!this.disableOpenByClick()) {
+            event.preventDefault();
+            event.stopPropagation();
             this.isOpen.set(!this.isOpen());
         }
     }
     eventClose($event) {
-        $event.stopPropagation();
-        $event.preventDefault();
+        if (!this.isOpen())
+            return;
         this.isOpen.set(false);
     }
     #findScrollableParent(element) {
@@ -1104,6 +1110,8 @@ class ShipPopoverComponent {
     #calculateMenuPosition() {
         const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
         const menuRect = this.popoverRef()?.nativeElement.getBoundingClientRect();
+        if (!menuRect)
+            return;
         const actionLeftInViewport = triggerRect.left;
         const actionBottomInViewport = triggerRect.bottom;
         let newLeft = actionLeftInViewport;
@@ -1132,9 +1140,13 @@ class ShipPopoverComponent {
             this.menuStyle.set(style);
         }
     }
+    ngOnDestroy() {
+        this.openAbort?.abort();
+        this.openAbort = null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.0", type: ShipPopoverComponent, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="trigger" #triggerRef (click)="toggleIsOpen($event)">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipPopoverComponent, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
         <ng-content select="button" />
@@ -1143,10 +1155,14 @@ class ShipPopoverComponent {
       <div class="trigger-anchor" [style.anchor-name]="id()"></div>
     </div>
 
-    <div popover #popoverRef class="popover" [style.position-anchor]="id()" [style]="menuStyle()">
-      <div class="overlay" (click)="isOpen() && eventClose($event)"></div>
-      <ng-content />
-    </div>
+    @if (isOpen()) {
+      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
+        <div class="overlay" (click)="eventClose($event)"></div>
+        <div class="popover-content" [style.position-anchor]="id()" [style]="menuStyle()">
+          <ng-content />
+        </div>
+      </div>
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipPopoverComponent, decorators: [{
@@ -1155,7 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     selector: 'sh-popover',
                     imports: [],
                     template: `
-    <div class="trigger" #triggerRef (click)="toggleIsOpen($event)">
+    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
       <div class="trigger-wrapper">
         <ng-content select="[trigger]" />
         <ng-content select="button" />
@@ -1164,10 +1180,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
       <div class="trigger-anchor" [style.anchor-name]="id()"></div>
     </div>
 
-    <div popover #popoverRef class="popover" [style.position-anchor]="id()" [style]="menuStyle()">
-      <div class="overlay" (click)="isOpen() && eventClose($event)"></div>
-      <ng-content />
-    </div>
+    @if (isOpen()) {
+      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
+        <div class="overlay" (click)="eventClose($event)"></div>
+        <div class="popover-content" [style.position-anchor]="id()" [style]="menuStyle()">
+          <ng-content />
+        </div>
+      </div>
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -1233,7 +1253,6 @@ class ShipFormFieldPopoverComponent {
 
       <sh-popover
         [(isOpen)]="isOpen"
-        [disableOpenByClick]="true"
         (closed)="close()"
         [options]="{
           closeOnButton: false,
@@ -1280,7 +1299,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
       <sh-popover
         [(isOpen)]="isOpen"
-        [disableOpenByClick]="true"
         (closed)="close()"
         [options]="{
           closeOnButton: false,
@@ -1667,7 +1685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 class ShipDatepickerInputComponent {
     constructor() {
-        this.#INIT_DATE = this.#getUTCDate(new Date());
+        // #INIT_DATE = this.#getUTCDate(new Date());
         this.ngModels = contentChild(NgModel, ...(ngDevMode ? [{ debugName: "ngModels" }] : []));
         this.#datePipe = inject(DatePipe);
         this.#inputRef = signal(null, ...(ngDevMode ? [{ debugName: "#inputRef" }] : []));
@@ -1682,7 +1700,7 @@ class ShipDatepickerInputComponent {
                 return null;
             return this.#datePipe.transform(date, mask);
         }, ...(ngDevMode ? [{ debugName: "_maskedDate" }] : []));
-        this.internalDate = signal(this.#INIT_DATE, ...(ngDevMode ? [{ debugName: "internalDate" }] : []));
+        this.internalDate = signal(null, ...(ngDevMode ? [{ debugName: "internalDate" }] : []));
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.currentClass = classMutationSignal();
         this.#inputObserver = contentProjectionSignal('#input-wrap input');
@@ -1708,7 +1726,6 @@ class ShipDatepickerInputComponent {
             }
         }, ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : []));
     }
-    #INIT_DATE;
     #datePipe;
     #inputRef;
     #inputObserver;
@@ -1720,10 +1737,6 @@ class ShipDatepickerInputComponent {
             input.dispatchEvent(new Event('input'));
         }
     }
-    open($event) {
-        $event.stopPropagation();
-        this.isOpen.set(true);
-    }
     close() {
         this.closed.emit(this.internalDate());
     }
@@ -1758,7 +1771,7 @@ class ShipDatepickerInputComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDatepickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipDatepickerInputComponent, isStandalone: true, selector: "sh-datepicker-input", inputs: { masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "ngModels", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <sh-form-field-popover (click)="open($event)" (closed)="close()" [(isOpen)]="isOpen">
+    <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -1766,7 +1779,7 @@ class ShipDatepickerInputComponent {
 
       <div id="input-wrap" class="input" ngProjectAs="input">
         @if (this.masking()) {
-          <div class="masked-value" (click)="open($event)">
+          <div class="masked-value">
             {{ _maskedDate() }}
           </div>
         }
@@ -1794,7 +1807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     imports: [ShipDatepickerComponent, ShipFormFieldPopoverComponent, ShipIconComponent],
                     providers: [DatePipe],
                     template: `
-    <sh-form-field-popover (click)="open($event)" (closed)="close()" [(isOpen)]="isOpen">
+    <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -1802,7 +1815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
       <div id="input-wrap" class="input" ngProjectAs="input">
         @if (this.masking()) {
-          <div class="masked-value" (click)="open($event)">
+          <div class="masked-value">
             {{ _maskedDate() }}
           </div>
         }
@@ -1919,10 +1932,6 @@ class ShipDaterangeInputComponent {
         input.dispatchEvent(new Event('input', { bubbles: true }));
         input.dispatchEvent(new Event('change', { bubbles: true }));
     }
-    open($event) {
-        $event.stopPropagation();
-        this.isOpen.set(true);
-    }
     close() {
         this.closed.emit({
             start: this.startDate(),
@@ -1931,11 +1940,7 @@ class ShipDaterangeInputComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipDaterangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipDaterangeInputComponent, isStandalone: true, selector: "sh-daterange-input", inputs: { monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "startDateInputs", predicate: ["startDate"], isSignal: true }, { propertyName: "endDateInputs", predicate: ["endDate"], isSignal: true }], ngImport: i0, template: `
-    <sh-form-field-popover
-      [class]="'columns-' + monthsToShow()"
-      (click)="open($event)"
-      (closed)="close()"
-      [(isOpen)]="isOpen">
+    <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -1943,9 +1948,7 @@ class ShipDaterangeInputComponent {
 
       <div class="input" ngProjectAs="input" #inputWrap>
         @if (this.masking()) {
-          <div class="masked-value" (click)="open($event)">
-            {{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}
-          </div>
+          <div class="masked-value">{{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}</div>
         }
         <ng-content select="input" />
       </div>
@@ -1976,11 +1979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     imports: [ShipDatepickerComponent, ShipFormFieldPopoverComponent, ShipIconComponent],
                     providers: [DatePipe],
                     template: `
-    <sh-form-field-popover
-      [class]="'columns-' + monthsToShow()"
-      (click)="open($event)"
-      (closed)="close()"
-      [(isOpen)]="isOpen">
+    <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -1988,9 +1987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
       <div class="input" ngProjectAs="input" #inputWrap>
         @if (this.masking()) {
-          <div class="masked-value" (click)="open($event)">
-            {{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}
-          </div>
+          <div class="masked-value">{{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}</div>
         }
         <ng-content select="input" />
       </div>
@@ -2513,7 +2510,7 @@ class ShipMenuComponent {
         this.closed = output();
         this.searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
         this.activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : []));
-        this.inputRef = viewChild('input', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+        this.inputRef = viewChild('inputRef', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
         this.optionsRef = viewChild('optionsRef', ...(ngDevMode ? [{ debugName: "optionsRef" }] : []));
         this.options = observeChildren(this.optionsRef, this.customOptionElementSelectors);
         this.optionsEl = computed(() => this.options.signal().filter((x) => !x.disabled), ...(ngDevMode ? [{ debugName: "optionsEl" }] : []));
@@ -2616,6 +2613,16 @@ class ShipMenuComponent {
         }, ...(ngDevMode ? [{ debugName: "activeOptionIndexEffect" }] : []));
     }
     #renderer;
+    toggleIsOpen(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled())
+            return;
+        this.isOpen.set(!this.isOpen());
+        if (this.searchable() && this.isOpen()) {
+            setTimeout(() => this.inputRef()?.nativeElement.focus());
+        }
+    }
     #calculateMatchScore(option, input) {
         if (!input)
             return 0;
@@ -2709,7 +2716,7 @@ class ShipMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipMenuComponent, isStandalone: true, selector: "sh-menu", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, openIndicator: { classPropertyName: "openIndicator", publicName: "openIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customOptionElementSelectors: { classPropertyName: "customOptionElementSelectors", publicName: "customOptionElementSelectors", isSignal: true, isRequired: false, transformFunction: null }, keepClickedOptionActive: { classPropertyName: "keepClickedOptionActive", publicName: "keepClickedOptionActive", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.disabled": "disabled()", "class.has-search": "searchable()", "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipMenuComponent, isStandalone: true, selector: "sh-menu", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, openIndicator: { classPropertyName: "openIndicator", publicName: "openIndicator", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, customOptionElementSelectors: { classPropertyName: "customOptionElementSelectors", publicName: "customOptionElementSelectors", isSignal: true, isRequired: false, transformFunction: null }, keepClickedOptionActive: { classPropertyName: "keepClickedOptionActive", publicName: "keepClickedOptionActive", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.disabled": "disabled()", "class.has-search": "searchable()", "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "optionsRef", first: true, predicate: ["optionsRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-popover
       #formFieldWrapper
       [(isOpen)]="isOpen"
@@ -2720,7 +2727,7 @@ class ShipMenuComponent {
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger [class.is-open]="isOpen()" (click)="!disabled() && isOpen.set(true)">
+      <div trigger [class.is-open]="isOpen()" (click)="toggleIsOpen($event)">
         <ng-content />
 
         @if (openIndicator()) {
@@ -2730,7 +2737,7 @@ class ShipMenuComponent {
 
       <div class="form-field-wrap">
         <sh-form-field class="small stretch" [class.hidden]="searchable() === false">
-          <input type="text" #input placeholder="Search" />
+          <input type="text" #inputRef placeholder="Search" />
         </sh-form-field>
       </div>
 
@@ -2760,7 +2767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger [class.is-open]="isOpen()" (click)="!disabled() && isOpen.set(true)">
+      <div trigger [class.is-open]="isOpen()" (click)="toggleIsOpen($event)">
         <ng-content />
 
         @if (openIndicator()) {
@@ -2770,7 +2777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
       <div class="form-field-wrap">
         <sh-form-field class="small stretch" [class.hidden]="searchable() === false">
-          <input type="text" #input placeholder="Search" />
+          <input type="text" #inputRef placeholder="Search" />
         </sh-form-field>
       </div>