@aurodesignsystem-dev/auro-formkit 0.0.0-pr1447.0 → 0.0.0-pr1448.0

package/components/checkbox/demo/api.md

@@ -74,8 +74,8 @@ The `auro-checkbox` element is for the purpose of allowing users to select one o
 | `auroCheckbox-focusin`  | `CustomEvent<any>` |                                                  |
 | `auroCheckbox-focusout` | `CustomEvent<any>` |                                                  |
 | `auroCheckbox-input`    | `CustomEvent<any>` |                                                  |
-| [change](#change)                | `CustomEvent<any>` | (Deprecated) Notifies when checked value is changed. |
-| [input](#input)                 | `InputEvent`       | Notifies when when checked value is changed by user's interface. |
+| [change](#change)                |                    | (Deprecated) Notifies when checked value is changed. |
+| [input](#input)                 |                    | Notifies when when checked value is changed by user's interface. |
 
 ## Slots
 

package/components/checkbox/demo/api.min.js

@@ -146,6 +146,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 // See LICENSE in the project root for license information.
 
 
+/* eslint-disable jsdoc/no-undefined-types -- @fires event names are not types */
 /**
  * The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
  * @customElement auro-checkbox
@@ -156,9 +157,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  *
  * @slot default - The default slot for the checkbox label.
  *
- * @fires {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @fires {InputEvent} input - Notifies when when checked value is changed by user's interface.
+ * @fires change - (Deprecated) Notifies when checked value is changed.
+ * @fires input - Notifies when when checked value is changed by user's interface.
  */
+/* eslint-enable jsdoc/no-undefined-types */
 
 // build the component class
 class AuroCheckbox extends i$2 {
@@ -1687,7 +1689,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604222117';
+var formkitVersion = '202604231640';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/demo/index.min.js

@@ -138,6 +138,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 // See LICENSE in the project root for license information.
 
 
+/* eslint-disable jsdoc/no-undefined-types -- @fires event names are not types */
 /**
  * The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
  * @customElement auro-checkbox
@@ -148,9 +149,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  *
  * @slot default - The default slot for the checkbox label.
  *
- * @fires {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @fires {InputEvent} input - Notifies when when checked value is changed by user's interface.
+ * @fires change - (Deprecated) Notifies when checked value is changed.
+ * @fires input - Notifies when when checked value is changed by user's interface.
  */
+/* eslint-enable jsdoc/no-undefined-types */
 
 // build the component class
 class AuroCheckbox extends i$2 {
@@ -1679,7 +1681,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202604222117';
+var formkitVersion = '202604231640';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/auro-checkbox-group.d.ts

@@ -95,12 +95,12 @@ export class AuroCheckboxGroup extends LitElement {
      */
     static register(name?: string): void;
     _initializeDefaults(): void;
-    appearance: string | undefined;
+    appearance: string;
     validity: any;
     disabled: any;
-    required: boolean | undefined;
-    horizontal: boolean | undefined;
-    onDark: boolean | undefined;
+    required: boolean;
+    horizontal: boolean;
+    onDark: boolean;
     /**
      * Indicates whether the checkbox group is in a dirty state (has been interacted with).
      * @type {boolean}
@@ -141,7 +141,7 @@ export class AuroCheckboxGroup extends LitElement {
      */
     private handleValueUpdate;
     firstUpdated(): void;
-    focusWithin: boolean | undefined;
+    focusWithin: boolean;
     /**
      * Helper method that handles the state of preselected checkboxes.
      * @private
@@ -154,7 +154,7 @@ export class AuroCheckboxGroup extends LitElement {
      * @returns {void}
      */
     private handleItems;
-    checkboxes: Element[] | undefined;
+    checkboxes: Element[];
     /**
      * Resets component to initial state.
      * @returns {void}

package/components/checkbox/dist/auro-checkbox.d.ts

@@ -8,8 +8,8 @@
  *
  * @slot default - The default slot for the checkbox label.
  *
- * @fires {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @fires {InputEvent} input - Notifies when when checked value is changed by user's interface.
+ * @fires change - (Deprecated) Notifies when checked value is changed.
+ * @fires input - Notifies when when checked value is changed by user's interface.
  */
 export class AuroCheckbox extends LitElement {
     static get styles(): import("lit").CSSResult[];
@@ -132,12 +132,12 @@ export class AuroCheckbox extends LitElement {
      */
     static register(name?: string): void;
     _initializeDefaults(): void;
-    appearance: string | undefined;
+    appearance: string;
     checked: any;
-    disabled: boolean | undefined;
-    error: boolean | undefined;
-    onDark: boolean | undefined;
-    touched: boolean | undefined;
+    disabled: boolean;
+    error: boolean;
+    onDark: boolean;
+    touched: boolean;
     /**
      * @private
      */
@@ -171,8 +171,8 @@ export class AuroCheckbox extends LitElement {
      * @returns {HTMLElement}
      */
     private generateIconHtml;
-    dom: Document | undefined;
-    svg: ChildNode | null | undefined;
+    dom: Document;
+    svg: ChildNode;
     /**
      * Resets component to initial state.
      * @returns {void}
@@ -185,7 +185,7 @@ export class AuroCheckbox extends LitElement {
      */
     private updateAriaLabel;
     firstUpdated(): void;
-    inputId: string | undefined;
+    inputId: string;
     /**
      * Handles keydown event to toggle the checkbox with Space key.
      * @private

package/components/checkbox/dist/index.js

@@ -98,6 +98,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 // See LICENSE in the project root for license information.
 
 
+/* eslint-disable jsdoc/no-undefined-types -- @fires event names are not types */
 /**
  * The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
  * @customElement auro-checkbox
@@ -108,9 +109,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  *
  * @slot default - The default slot for the checkbox label.
  *
- * @fires {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @fires {InputEvent} input - Notifies when when checked value is changed by user's interface.
+ * @fires change - (Deprecated) Notifies when checked value is changed.
+ * @fires input - Notifies when when checked value is changed by user's interface.
  */
+/* eslint-enable jsdoc/no-undefined-types */
 
 // build the component class
 class AuroCheckbox extends LitElement {
@@ -1632,7 +1634,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604222117';
+var formkitVersion = '202604231640';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/checkbox/dist/registered.js

@@ -98,6 +98,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 // See LICENSE in the project root for license information.
 
 
+/* eslint-disable jsdoc/no-undefined-types -- @fires event names are not types */
 /**
  * The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.
  * @customElement auro-checkbox
@@ -108,9 +109,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  *
  * @slot default - The default slot for the checkbox label.
  *
- * @fires {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
- * @fires {InputEvent} input - Notifies when when checked value is changed by user's interface.
+ * @fires change - (Deprecated) Notifies when checked value is changed.
+ * @fires input - Notifies when when checked value is changed by user's interface.
  */
+/* eslint-enable jsdoc/no-undefined-types */
 
 // build the component class
 class AuroCheckbox extends LitElement {
@@ -1632,7 +1634,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202604222117';
+var formkitVersion = '202604231640';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/combobox/demo/api.min.js

@@ -5228,7 +5228,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604222117';
+var formkitVersion$2 = '202604231640';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12980,7 +12980,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604222117';
+var formkitVersion$1 = '202604231640';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -14045,7 +14045,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604222117';
+var formkitVersion = '202604231640';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14442,7 +14442,6 @@ class AuroCombobox extends AuroElement {
     this.optionActive = null;
     this.persistInput = false;
     this.required = false;
-    this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
@@ -15055,6 +15054,10 @@ class AuroCombobox extends AuroElement {
     });
 
     if (this.value && this.input.value && !this.menu.value) {
+      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
+        this.setMenuValue(this.value);
+      }
+
       this.syncValuesAndStates();
     }
 
@@ -15665,10 +15668,6 @@ class AuroCombobox extends AuroElement {
     this.configureCombobox();
     this.configureMenu();
 
-    // Set the initial value in auro-menu if defined
-    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
-      this.menu.value = this.value;
-    }
   }
 
   /**
@@ -15749,10 +15748,16 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
 
+      if (this.menu && this.hasValue && this.menu.options) {
+        this.menu.options.forEach((opt) => {
+          if (!opt.hasAttribute('static')) {
+            opt.removeAttribute('hidden');
+          }
+        });
+      }
+
       if (this.behavior === 'suggestion') {
-        // if menu has an option that has matched value, then select it,
-        // otherwise clear the menu value since the input value doesn't match any option
-        if (this.menu.options && this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;
@@ -16982,10 +16987,13 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
+    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    this.stageUpdate();
+    if (this.selectedOptions.length < previousCount) {
+      this.stageUpdate();
+    }
   }
 
   /**
@@ -17405,8 +17413,6 @@ class AuroMenu extends AuroElement {
      */
     this.size = "sm";
 
-    // Value of the selected options
-    this.value = undefined;
     // Currently selected option
     this.optionSelected = undefined;
     // String used for highlighting/filtering

package/components/combobox/demo/index.min.js

@@ -5140,7 +5140,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$2 = '202604222117';
+var formkitVersion$2 = '202604231640';
 
 let AuroElement$2 = class AuroElement extends i$4 {
   static get properties() {
@@ -12892,7 +12892,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
   }
 };
 
-var formkitVersion$1 = '202604222117';
+var formkitVersion$1 = '202604231640';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13957,7 +13957,7 @@ class AuroBibtemplate extends i$4 {
   }
 }
 
-var formkitVersion = '202604222117';
+var formkitVersion = '202604231640';
 
 var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14354,7 +14354,6 @@ class AuroCombobox extends AuroElement {
     this.optionActive = null;
     this.persistInput = false;
     this.required = false;
-    this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
@@ -14967,6 +14966,10 @@ class AuroCombobox extends AuroElement {
     });
 
     if (this.value && this.input.value && !this.menu.value) {
+      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
+        this.setMenuValue(this.value);
+      }
+
       this.syncValuesAndStates();
     }
 
@@ -15577,10 +15580,6 @@ class AuroCombobox extends AuroElement {
     this.configureCombobox();
     this.configureMenu();
 
-    // Set the initial value in auro-menu if defined
-    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
-      this.menu.value = this.value;
-    }
   }
 
   /**
@@ -15661,10 +15660,16 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
 
+      if (this.menu && this.hasValue && this.menu.options) {
+        this.menu.options.forEach((opt) => {
+          if (!opt.hasAttribute('static')) {
+            opt.removeAttribute('hidden');
+          }
+        });
+      }
+
       if (this.behavior === 'suggestion') {
-        // if menu has an option that has matched value, then select it,
-        // otherwise clear the menu value since the input value doesn't match any option
-        if (this.menu.options && this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;
@@ -16894,10 +16899,13 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
+    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    this.stageUpdate();
+    if (this.selectedOptions.length < previousCount) {
+      this.stageUpdate();
+    }
   }
 
   /**
@@ -17317,8 +17325,6 @@ class AuroMenu extends AuroElement {
      */
     this.size = "sm";
 
-    // Value of the selected options
-    this.value = undefined;
     // Currently selected option
     this.optionSelected = undefined;
     // String used for highlighting/filtering

package/components/combobox/dist/auro-combobox.d.ts

@@ -329,48 +329,47 @@ export class AuroCombobox extends AuroElement {
      * @returns {void} Internal defaults.
      */
     private _initializeDefaults;
-    appearance: string | undefined;
-    disabled: boolean | undefined;
-    msgSelectionMissing: string | undefined;
-    noFilter: boolean | undefined;
-    noValidate: boolean | undefined;
+    appearance: string;
+    disabled: boolean;
+    msgSelectionMissing: string;
+    noFilter: boolean;
+    noValidate: boolean;
     optionActive: any;
-    persistInput: boolean | undefined;
-    required: boolean | undefined;
-    value: any;
+    persistInput: boolean;
+    required: boolean;
     typedValue: any;
-    behavior: string | undefined;
-    clearBtnFocused: boolean | undefined;
-    checkmark: boolean | undefined;
-    dvInputOnly: boolean | undefined;
-    fullscreenBreakpoint: string | undefined;
-    matchWidth: boolean | undefined;
-    shape: string | undefined;
-    size: string | undefined;
-    triggerIcon: boolean | undefined;
-    placement: string | undefined;
-    offset: number | undefined;
-    noFlip: boolean | undefined;
-    shift: boolean | undefined;
-    autoPlacement: boolean | undefined;
+    behavior: string;
+    clearBtnFocused: boolean;
+    checkmark: boolean;
+    dvInputOnly: boolean;
+    fullscreenBreakpoint: string;
+    matchWidth: boolean;
+    shape: string;
+    size: string;
+    triggerIcon: boolean;
+    placement: string;
+    offset: number;
+    noFlip: boolean;
+    shift: boolean;
+    autoPlacement: boolean;
     dropdownTag: any;
     bibtemplateTag: any;
     inputTag: any;
     helpTextTag: any;
-    availableOptions: any[] | any[] | undefined;
+    availableOptions: any[] | any[];
     dropdownId: any;
     dropdownOpen: any;
-    triggerExpandedState: boolean | undefined;
-    _expandedTimeout: number | null | undefined;
-    _inFullscreenTransition: boolean | undefined;
+    triggerExpandedState: boolean;
+    _expandedTimeout: NodeJS.Timeout;
+    _inFullscreenTransition: boolean;
     errorMessage: any;
-    isHiddenWhileLoading: boolean | undefined;
-    largeFullscreenHeadline: boolean | undefined;
-    onDark: boolean | undefined;
+    isHiddenWhileLoading: boolean;
+    largeFullscreenHeadline: boolean;
+    onDark: boolean;
     optionSelected: any;
     runtimeUtils: any;
-    touched: boolean | undefined;
-    validation: AuroFormValidation | undefined;
+    touched: boolean;
+    validation: AuroFormValidation;
     validity: any;
     /**
      * Returns the current value of the input element within the combobox.
@@ -482,8 +481,9 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private configureMenu;
-    menu: Element | null | undefined;
-    defaultMenuShape: string | null | undefined;
+    menu: Element;
+    defaultMenuShape: string;
+    value: any;
     /**
      * Binds all behavior needed to the input after rendering.
      * @private
@@ -512,14 +512,14 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private handleInputValueChange;
-    _syncingBibValue: boolean | undefined;
+    _syncingBibValue: boolean;
     /**
      * Binds all behavior needed to the combobox after rendering.
      * @private
      * @returns {void}
      */
     private configureCombobox;
-    menus: Element[] | undefined;
+    menus: Element[];
     firstUpdated(): void;
     dropdown: any;
     input: any;
@@ -550,7 +550,7 @@ export class AuroCombobox extends AuroElement {
      */
     validate(force?: boolean): void;
     updated(changedProperties: any): void;
-    hasValue: boolean | undefined;
+    hasValue: boolean;
     /**
      * Applies slotted nodes to a target element with a new slot name.
      * @private

package/components/combobox/dist/index.js

@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202604222117';
+var formkitVersion$2 = '202604231640';
 
 let AuroElement$2 = class AuroElement extends LitElement {
   static get properties() {
@@ -12818,7 +12818,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202604222117';
+var formkitVersion$1 = '202604231640';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -13883,7 +13883,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202604222117';
+var formkitVersion = '202604231640';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -14280,7 +14280,6 @@ class AuroCombobox extends AuroElement {
     this.optionActive = null;
     this.persistInput = false;
     this.required = false;
-    this.value = undefined;
     this.typedValue = undefined;
     this.behavior = "suggestion";
     this.clearBtnFocused = false;
@@ -14893,6 +14892,10 @@ class AuroCombobox extends AuroElement {
     });
 
     if (this.value && this.input.value && !this.menu.value) {
+      if (this.behavior === 'suggestion' && this.menu.options && this.menu.options.some((opt) => opt.value === this.value)) {
+        this.setMenuValue(this.value);
+      }
+
       this.syncValuesAndStates();
     }
 
@@ -15503,10 +15506,6 @@ class AuroCombobox extends AuroElement {
     this.configureCombobox();
     this.configureMenu();
 
-    // Set the initial value in auro-menu if defined
-    if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
-      this.menu.value = this.value;
-    }
   }
 
   /**
@@ -15587,10 +15586,16 @@ class AuroCombobox extends AuroElement {
         this.input.value = this.value;
       }
 
+      if (this.menu && this.hasValue && this.menu.options) {
+        this.menu.options.forEach((opt) => {
+          if (!opt.hasAttribute('static')) {
+            opt.removeAttribute('hidden');
+          }
+        });
+      }
+
       if (this.behavior === 'suggestion') {
-        // if menu has an option that has matched value, then select it,
-        // otherwise clear the menu value since the input value doesn't match any option
-        if (this.menu.options && this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
+        if (!this.menu.options || this.menu.options.length === 0) ; else if (this.menu.options.filter((opt) => opt.value === this.value).length > 0) {
           this.setMenuValue(this.value);
         } else {
           this.menu.value = undefined;