perf: update handling of invalid values in select

BREAKING CHANGE: The auroMenu-selectValueReset is now deprecated as it is no longer needed.

components/combobox/src/auro-combobox.js

@@ -382,12 +382,6 @@ export class AuroCombobox extends LitElement {
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
       this.optionSelected = undefined;
     });
-
-    this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.optionSelected = undefined;
-      this.value = undefined;
-      this.validation.validate(this);
-    });
   }
 
   /**

components/menu/demo/api.md

@@ -34,7 +34,6 @@ The auro-menu element provides users a way to select from a list of options.
 | `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
 | `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
 | `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
 
 ## Slots

components/menu/docs/api.md

@@ -31,7 +31,6 @@ The auro-menu element provides users a way to select from a list of options.
 | `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
 | `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
 | `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
 
 ## Slots

components/menu/src/auro-menu.js

@@ -25,7 +25,6 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - Text to show while loading attribute is set
  * @slot loadingIcon - Icon to show while loading attribute is set
@@ -436,12 +435,6 @@ export class AuroMenu extends LitElement {
       }
     } else {
       this.resetOptionsStates();
-
-      this.dispatchEvent(new CustomEvent('auroMenu-selectValueReset', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
     }
   }
 

components/select/apiExamples/value.html

@@ -1,6 +1,5 @@
 <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
 <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
-<auro-button id="undefinedValueExampleBtn">Set Value to Undefined</auro-button>
 <br/><br/>
 <auro-select id="valueExample" value="price">
   <span slot="label">Name</span>

components/select/apiExamples/value.js

@@ -3,13 +3,9 @@ export function valueExample() {
 
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
     valueExample.value = 'arrival';
-  })
+  });
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
     valueExample.value = 'flight course';
-  })
-
-  document.querySelector('#undefinedValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = undefined;
-  })
+  });
 }

components/select/demo/api.md

@@ -111,7 +111,6 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
   <!-- The below content is automatically added from ./../apiExamples/value.html -->
   <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
   <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
-  <auro-button id="undefinedValueExampleBtn">Set Value to Undefined</auro-button>
   <br/><br/>
   <auro-select id="valueExample" value="price">
     <span slot="label">Name</span>
@@ -134,7 +133,6 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
 ```html
 <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
 <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
-<auro-button id="undefinedValueExampleBtn">Set Value to Undefined</auro-button>
 <br/><br/>
 <auro-select id="valueExample" value="price">
   <span slot="label">Name</span>
@@ -158,15 +156,11 @@ export function valueExample() {
 
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
     valueExample.value = 'arrival';
-  })
+  });
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
     valueExample.value = 'flight course';
-  })
-
-  document.querySelector('#undefinedValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = undefined;
-  })
+  });
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

components/select/src/auro-select.js

@@ -277,26 +277,8 @@ export class AuroSelect extends LitElement {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.menu.optionSelected = undefined;
-      this.optionSelected = this.menu.optionSelected;
-
-      this.validity = 'patternMismatch';
-
-      // Capitalizes the first letter of each word in this.value string
-      const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
-
-      // Pass the new string to the trigger content
-      this.updateDisplayedValue(valueStr);
-    });
-
-    this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      // set the trigger content back to the placeholder
+      this.reset();
       this.updateDisplayedValue(this.placeholder);
-
-      this.optionSelected = undefined;
-      this.value = undefined;
-
-      this.validation.validate(this);
     });
   }