perf: update handling of invalid values in select

BREAKING CHANGE: The auroMenu-selectValueReset is now deprecated as it is no longer needed.
AlaskaAirlines · Jan 7, 2025 · e69fb46 · e69fb46
1 parent 1861de9
commit e69fb46
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 38 deletions.
diff --git a/components/combobox/src/auro-combobox.js b/components/combobox/src/auro-combobox.js
@@ -384,9 +384,7 @@ export class AuroCombobox extends LitElement {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.optionSelected = undefined;
-      this.value = undefined;
-      this.validation.validate(this);
+      this.reset();
     });
   }
 

diff --git a/components/menu/src/auro-menu.js b/components/menu/src/auro-menu.js
@@ -24,8 +24,8 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @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-customEventFired - Notifies that a custom event has been fired.
  * @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

diff --git a/components/select/apiExamples/value.html b/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>

diff --git a/components/select/apiExamples/value.js b/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;
-  })
+  });
 }
diff --git a/components/select/demo/api.md b/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 -->

diff --git a/components/select/src/auro-select.js b/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);
     });
   }