@aurodesignsystem-dev/auro-formkit 0.0.0-pr1059.1 → 0.0.0-pr1059.3

package/components/combobox/README.md

@@ -22,7 +22,7 @@ The following sections are editable by making changes to the following files:
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
 
-Combobox behaves as a filter of menu options. Typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
+By default, `auro-combobox` behaves as a suggestion list. This means any value may be typed into the combobox and the menu list presented effectively provides sample or suggestion options. With the use of the `persistInput` attribute the `auro-combobox` behaves as a filter of menu options. In this mode. typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->

package/components/combobox/demo/api.md

@@ -170,7 +170,7 @@ The menu in this example was populated from data from a country/city API. To kee
   <!-- ----------------- -->
   <auro-combobox
     id="dynamicMenuExample"
-    value="GER"
+    value="TAN"
     layout="snowflake"
     shape="snowflake"
     size="lg"
@@ -180,13 +180,35 @@ The menu in this example was populated from data from a country/city API. To kee
     dvInputOnly
     required>
     <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
-    <span slot="label">Name</span>
+    <span slot="label">First</span>
     <!--
       The auro-combobox element requires an empty auro-menu element
       due to the requirements of auro-dropdown and auro-input
     -->
     <auro-menu id="initMenu"></auro-menu>
-  </auro-combobox>
+  </auro-combobox>
+  <auro-combobox
+    id="dynamicMenuExampleTwo"
+    value="GER"
+    layout="snowflake"
+    shape="snowflake"
+    size="lg"
+    ondark
+    noFilter
+    persistInput
+    dvInputOnly
+    required>
+    <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
+    <span slot="label">Second</span>
+    <!--
+      The auro-combobox element requires an empty auro-menu element
+      due to the requirements of auro-dropdown and auro-input
+    -->
+    <auro-menu id="initMenuTwo"></auro-menu>
+  </auro-combobox>
+  <auro-button id="dynamicMenuSwapButton">
+    Swap Values
+  </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -199,7 +221,7 @@ The menu in this example was populated from data from a country/city API. To kee
 <!-- ----------------- -->
 <auro-combobox
   id="dynamicMenuExample"
-  value="GER"
+  value="TAN"
   layout="snowflake"
   shape="snowflake"
   size="lg"
@@ -209,13 +231,35 @@ The menu in this example was populated from data from a country/city API. To kee
   dvInputOnly
   required>
   <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
-  <span slot="label">Name</span>
+  <span slot="label">First</span>
   <!--
     The auro-combobox element requires an empty auro-menu element
     due to the requirements of auro-dropdown and auro-input
   -->
   <auro-menu id="initMenu"></auro-menu>
 </auro-combobox>
+<auro-combobox
+  id="dynamicMenuExampleTwo"
+  value="GER"
+  layout="snowflake"
+  shape="snowflake"
+  size="lg"
+  ondark
+  noFilter
+  persistInput
+  dvInputOnly
+  required>
+  <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
+  <span slot="label">Second</span>
+  <!--
+    The auro-combobox element requires an empty auro-menu element
+    due to the requirements of auro-dropdown and auro-input
+  -->
+  <auro-menu id="initMenuTwo"></auro-menu>
+</auro-combobox>
+<auro-button id="dynamicMenuSwapButton">
+  Swap Values
+</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamicMenu.js) -->
@@ -234,9 +278,35 @@ export async function dynamicMenuExample() {
     }
   }
 
+  function swapValues() {
+    const elOne = document.querySelector('#dynamicMenuExample');
+    const elTwo = document.querySelector('#dynamicMenuExampleTwo');
+
+    const elOneValue = elOne.value;
+    const elTwoValue = elTwo.value;
+
+    const elOneInputValue = elOne.input.value;
+    const elTwoInputValue = elTwo.input.value;
+
+    elOne.reset();
+    elTwo.reset();
+
+    elOne.value = elTwoValue;
+    elTwo.value = elOneValue;
+
+    setTimeout(() => {
+      elOne.typedValue = elTwoInputValue;
+      elTwo.typedValue = elOneInputValue;
+    }, 0);
+  }
+
+  document.querySelector('#dynamicMenuSwapButton').addEventListener('click', () => {
+    swapValues();
+  });
+
   // Generates HTML for menu and submenus using country & city data from an external API
-  function generateHtml(data) {
-    const initialMenu = document.querySelector('#initMenu');
+  function generateHtml(data, selector) {
+    const initialMenu = document.querySelector(selector);
 
     resetMenu(initialMenu);
 
@@ -279,13 +349,32 @@ export async function dynamicMenuExample() {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
 
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
   });
 
   if (dynamicMenuExampleEl.value && dynamicMenuExampleEl.value.length > 0 && dynamicMenuExampleEl.input.value && (!dynamicMenuExampleEl.menu.availableOptions || dynamicMenuExampleEl.menu.availableOptions.length === 0)) {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
+  }
+
+  // TODO: Need to refactor this to to not console a console error
+  const dynamicDataTwo = new DynamicData();
+  const dynamicMenuExampleElTwo = document.querySelector('#dynamicMenuExample');
+  const dropdownElTwo = dynamicMenuExampleElTwo.shadowRoot.querySelector(dynamicMenuExampleElTwo.dropdownTag._$litStatic$);
+  const inputElTwo = dropdownElTwo.querySelector(dynamicMenuExampleElTwo.inputTag._$litStatic$);
+
+  inputElTwo.addEventListener('input', () => {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputEl.value);
+
+    generateHtml(data, '#initMenuTwo');
+  });
+
+  if (dynamicMenuExampleElTwo.value && dynamicMenuExampleElTwo.value.length > 0 && dynamicMenuExampleElTwo.input.value && (!dynamicMenuExampleElTwo.menu.availableOptions || dynamicMenuExampleElTwo.menu.availableOptions.length === 0)) {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputElTwo.value);
+    generateHtml(data, '#initMenuTwo');
   }
 }
 ```

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

@@ -40,9 +40,36 @@ async function dynamicMenuExample() {
     }
   }
 
+  function swapValues() {
+    const elOne = document.querySelector('#dynamicMenuExample');
+    const elTwo = document.querySelector('#dynamicMenuExampleTwo');
+
+    const elOneValue = elOne.value;
+    const elTwoValue = elTwo.value;
+
+    const elOneInputValue = elOne.input.value;
+    const elTwoInputValue = elTwo.input.value;
+
+    elOne.reset();
+    elTwo.reset();
+
+    elOne.value = elTwoValue;
+    elTwo.value = elOneValue;
+
+
+    setTimeout(() => {
+      elOne.typedValue = elTwoInputValue;
+      elTwo.typedValue = elOneInputValue;
+    }, 0);
+  }
+
+  document.querySelector('#dynamicMenuSwapButton').addEventListener('click', () => {
+    swapValues();
+  });
+
   // Generates HTML for menu and submenus using country & city data from an external API
-  function generateHtml(data) {
-    const initialMenu = document.querySelector('#initMenu');
+  function generateHtml(data, selector) {
+    const initialMenu = document.querySelector(selector);
 
     resetMenu(initialMenu);
 
@@ -84,14 +111,33 @@ async function dynamicMenuExample() {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
 
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
   });
 
 
   if (dynamicMenuExampleEl.value && dynamicMenuExampleEl.value.length > 0 && dynamicMenuExampleEl.input.value && (!dynamicMenuExampleEl.menu.availableOptions || dynamicMenuExampleEl.menu.availableOptions.length === 0)) {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
-    generateHtml(data);
+    generateHtml(data, '#initMenu');
+  }
+
+  // TODO: Need to refactor this to to not console a console error
+  const dynamicDataTwo = new DynamicData();
+  const dynamicMenuExampleElTwo = document.querySelector('#dynamicMenuExample');
+  const dropdownElTwo = dynamicMenuExampleElTwo.shadowRoot.querySelector(dynamicMenuExampleElTwo.dropdownTag._$litStatic$);
+  const inputElTwo = dropdownElTwo.querySelector(dynamicMenuExampleElTwo.inputTag._$litStatic$);
+
+  inputElTwo.addEventListener('input', () => {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputEl.value);
+
+    generateHtml(data, '#initMenuTwo');
+  });
+
+  if (dynamicMenuExampleElTwo.value && dynamicMenuExampleElTwo.value.length > 0 && dynamicMenuExampleElTwo.input.value && (!dynamicMenuExampleElTwo.menu.availableOptions || dynamicMenuExampleElTwo.menu.availableOptions.length === 0)) {
+    let data = dynamicDataTwo.getData();
+    data = dynamicDataTwo.filterData(data, inputElTwo.value);
+    generateHtml(data, '#initMenuTwo');
   }
 }
 
@@ -5306,8 +5352,13 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
     }
 
     if (this.triggerContentSlot) {
@@ -10578,7 +10629,7 @@ class BaseInput extends AuroElement$2$1 {
       ...super.properties,
 
       /**
-       * If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.
+       * If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
        */
       dvInputOnly: {
         type: Boolean,
@@ -15855,7 +15906,7 @@ var bibTemplateVersion = '1.0.0';
 
 var styleCss$4 = i$5`.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 #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
-var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background-hover, rgba(0, 39, 74, 0.2));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background-hover, rgba(0, 39, 74, 0.2))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
+var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
 var styleSnowflakeCss = i$5`:host([layout*=snowflake][shape*=snowflake]) [auro-input]{width:100%}:host([layout*=snowflake][shape*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake][shape*=snowflake])::part(helpText){text-align:center}`;
 
@@ -16671,11 +16722,6 @@ class AuroCombobox extends AuroElement$1 {
     this.menu.value = this.value;
     this.menu.matchWord = this.input.value;
 
-    console.warn('syncValuesAndStates()');
-    console.info('this.value', this.value);
-    console.info('this.input.value', this.input.value);
-    console.info('this.menu.value', this.menu.value);
-
     // Wait a lifecycle for child components to update
     await Promise.all([this.menu.updateComplete]);
 
@@ -16709,6 +16755,8 @@ class AuroCombobox extends AuroElement$1 {
         this.input.appendChild(displayValueEl.cloneNode(true));
       }
     }
+
+    this.requestUpdate();
   }
 
   /**
@@ -16730,7 +16778,6 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleMenuOptions() {
-    console.warn('handleMenuOptions()');
     this.resetMenuMatchword();
 
     this.generateOptionsArray();
@@ -16917,7 +16964,6 @@ class AuroCombobox extends AuroElement$1 {
 
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
-      console.warn('event auroMenu-selectedOption', evt);
       if (this.menu.optionSelected) {
         const selected = this.menu.optionSelected;
 
@@ -17018,7 +17064,6 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleInputValueChange(event) {
-    console.warn('handleInputValueChange', event);
     if (event.target === this.inputInBib) {
       this.input.value = this.inputInBib.value;
       return;
@@ -17039,15 +17084,14 @@ class AuroCombobox extends AuroElement$1 {
       this.validate();
     }
 
-    // Hide menu if value is empty, otherwise show if there are available suggestions
     if (this.input.value && this.input.value.length === 0) {
+      // Hide menu if value is empty, otherwise show if there are available suggestions
       this.hideBib();
-    }
-
-    // Force dropdown bib to hide if input value has no matching suggestions
-    if (this.menu.loading) {
+    } else if (this.menu.loading) {
+      // if input has value but menu is loading, show bib immediately
       this.showBib();
     } else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+      // Force dropdown bib to hide if input value has no matching suggestions
       this.hideBib();
     }
 
@@ -17180,10 +17224,11 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
-    this.input.reset();
-    this.menu.reset();
     this.optionSelected = undefined;
     this.value = undefined;
+    this.typedValue = undefined;
+    this.input.value = undefined;
+    this.menu.value = undefined;
     this.validation.reset(this);
     this.touched = false;
   }
@@ -17307,7 +17352,6 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleSlotChange(event) {
-    console.warn('handleSlotChange', event);
     switch (event.target.name) {
       case '':
         if (!this.menu || this.menu !== this.querySelector('auro-menu, [auro-menu]')) {
@@ -17743,6 +17787,10 @@ class AuroMenu extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
+    if (changedProperties.has('optionSelected')) {
+      this.notifySelectionChange();
+    }
+
     if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();
@@ -17750,8 +17798,6 @@ class AuroMenu extends AuroElement$1 {
 
 
     if (changedProperties.has("value")) {
-      console.warn('menu value updated', this.value);
-      console.info('available options', this.availableOptions);
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
         this.clearSelection();
@@ -17763,12 +17809,9 @@ class AuroMenu extends AuroElement$1 {
 
           this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
         } else {
-          console.info('single-select mode, looking for value', this.value);
           // In single-select mode, this.value should be a string
           const matchingOptions = this.items.find((item) => item.value === this.value);
 
-          console.info('matchingOptions', matchingOptions);
-
           if (matchingOptions) {
             this.optionSelected = matchingOptions;
             this.index = this.items.indexOf(matchingOptions);
@@ -17777,8 +17820,6 @@ class AuroMenu extends AuroElement$1 {
             this.optionSelected = undefined;
             this.index = -1;
           }
-
-          console.warn('optionSelected', this.optionSelected);
         }
 
         // If no matching options were found in either mode
@@ -17805,11 +17846,6 @@ class AuroMenu extends AuroElement$1 {
 
     // Process all other UI updates
     this.updateItemsState(changedProperties);
-
-    if (changedProperties.has('optionSelected')) {
-      console.warn('updated: optionSelected', this.optionSelected);
-      this.notifySelectionChange();
-    }
   }
 
   /**

package/components/combobox/demo/index.md

@@ -4,7 +4,7 @@
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
 `<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
 
-Combobox behaves as a filter of menu options. Typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
+By default, `auro-combobox` behaves as a suggestion list. This means any value may be typed into the combobox and the menu list presented effectively provides sample or suggestion options. With the use of the `persistInput` attribute the `auro-combobox` behaves as a filter of menu options. In this mode. typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-combobox use cases

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

@@ -5154,8 +5154,13 @@ class AuroDropdown extends AuroElement$4 {
     }
 
     if (event) {
-      this.triggerNode = event.target;
-      this.triggerContentSlot = event.target.assignedNodes();
+      // Wrap in a try-catch block to handle errors when trying to use assignedNodes from the NodeJS test environment.
+      try {
+        this.triggerNode = event.target;
+        this.triggerContentSlot = event.target.assignedNodes();
+      } catch (error) {
+        console.warn('auro-dropdown: Unable to access the trigger content slot.', error); // eslint-disable-line no-console
+      }
     }
 
     if (this.triggerContentSlot) {
@@ -10426,7 +10431,7 @@ class BaseInput extends AuroElement$2$1 {
       ...super.properties,
 
       /**
-       * If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.
+       * If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
        */
       dvInputOnly: {
         type: Boolean,
@@ -15703,7 +15708,7 @@ var bibTemplateVersion = '1.0.0';
 
 var styleCss$4 = i$5`.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 #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
-var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background-hover, rgba(0, 39, 74, 0.2));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background-hover, rgba(0, 39, 74, 0.2))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
+var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
 var styleSnowflakeCss = i$5`:host([layout*=snowflake][shape*=snowflake]) [auro-input]{width:100%}:host([layout*=snowflake][shape*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake][shape*=snowflake])::part(helpText){text-align:center}`;
 
@@ -16519,11 +16524,6 @@ class AuroCombobox extends AuroElement$1 {
     this.menu.value = this.value;
     this.menu.matchWord = this.input.value;
 
-    console.warn('syncValuesAndStates()');
-    console.info('this.value', this.value);
-    console.info('this.input.value', this.input.value);
-    console.info('this.menu.value', this.menu.value);
-
     // Wait a lifecycle for child components to update
     await Promise.all([this.menu.updateComplete]);
 
@@ -16557,6 +16557,8 @@ class AuroCombobox extends AuroElement$1 {
         this.input.appendChild(displayValueEl.cloneNode(true));
       }
     }
+
+    this.requestUpdate();
   }
 
   /**
@@ -16578,7 +16580,6 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleMenuOptions() {
-    console.warn('handleMenuOptions()');
     this.resetMenuMatchword();
 
     this.generateOptionsArray();
@@ -16765,7 +16766,6 @@ class AuroCombobox extends AuroElement$1 {
 
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
-      console.warn('event auroMenu-selectedOption', evt);
       if (this.menu.optionSelected) {
         const selected = this.menu.optionSelected;
 
@@ -16866,7 +16866,6 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleInputValueChange(event) {
-    console.warn('handleInputValueChange', event);
     if (event.target === this.inputInBib) {
       this.input.value = this.inputInBib.value;
       return;
@@ -16887,15 +16886,14 @@ class AuroCombobox extends AuroElement$1 {
       this.validate();
     }
 
-    // Hide menu if value is empty, otherwise show if there are available suggestions
     if (this.input.value && this.input.value.length === 0) {
+      // Hide menu if value is empty, otherwise show if there are available suggestions
       this.hideBib();
-    }
-
-    // Force dropdown bib to hide if input value has no matching suggestions
-    if (this.menu.loading) {
+    } else if (this.menu.loading) {
+      // if input has value but menu is loading, show bib immediately
       this.showBib();
     } else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+      // Force dropdown bib to hide if input value has no matching suggestions
       this.hideBib();
     }
 
@@ -17028,10 +17026,11 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
-    this.input.reset();
-    this.menu.reset();
     this.optionSelected = undefined;
     this.value = undefined;
+    this.typedValue = undefined;
+    this.input.value = undefined;
+    this.menu.value = undefined;
     this.validation.reset(this);
     this.touched = false;
   }
@@ -17155,7 +17154,6 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleSlotChange(event) {
-    console.warn('handleSlotChange', event);
     switch (event.target.name) {
       case '':
         if (!this.menu || this.menu !== this.querySelector('auro-menu, [auro-menu]')) {
@@ -17591,6 +17589,10 @@ class AuroMenu extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
+    if (changedProperties.has('optionSelected')) {
+      this.notifySelectionChange();
+    }
+
     if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();
@@ -17598,8 +17600,6 @@ class AuroMenu extends AuroElement$1 {
 
 
     if (changedProperties.has("value")) {
-      console.warn('menu value updated', this.value);
-      console.info('available options', this.availableOptions);
       // Handle null/undefined case
       if (this.value === undefined || this.value === null) {
         this.clearSelection();
@@ -17611,12 +17611,9 @@ class AuroMenu extends AuroElement$1 {
 
           this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
         } else {
-          console.info('single-select mode, looking for value', this.value);
           // In single-select mode, this.value should be a string
           const matchingOptions = this.items.find((item) => item.value === this.value);
 
-          console.info('matchingOptions', matchingOptions);
-
           if (matchingOptions) {
             this.optionSelected = matchingOptions;
             this.index = this.items.indexOf(matchingOptions);
@@ -17625,8 +17622,6 @@ class AuroMenu extends AuroElement$1 {
             this.optionSelected = undefined;
             this.index = -1;
           }
-
-          console.warn('optionSelected', this.optionSelected);
         }
 
         // If no matching options were found in either mode
@@ -17653,11 +17648,6 @@ class AuroMenu extends AuroElement$1 {
 
     // Process all other UI updates
     this.updateItemsState(changedProperties);
-
-    if (changedProperties.has('optionSelected')) {
-      console.warn('updated: optionSelected', this.optionSelected);
-      this.notifySelectionChange();
-    }
   }
 
   /**

package/components/combobox/demo/readme.md

@@ -22,7 +22,7 @@ The following sections are editable by making changes to the following files:
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 `<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
 
-Combobox behaves as a filter of menu options. Typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
+By default, `auro-combobox` behaves as a suggestion list. This means any value may be typed into the combobox and the menu list presented effectively provides sample or suggestion options. With the use of the `persistInput` attribute the `auro-combobox` behaves as a filter of menu options. In this mode. typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->