From cd34721767afdb8175639e252ccc94ff5488c11c Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Mon, 6 Jan 2025 13:35:01 -0800 Subject: [PATCH] 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 | 6 ------ components/menu/demo/api.md | 1 - components/menu/docs/api.md | 1 - components/menu/src/auro-menu.js | 7 ------- components/select/apiExamples/value.html | 1 - components/select/apiExamples/value.js | 8 ++------ components/select/demo/api.md | 10 ++-------- components/select/src/auro-select.js | 20 +------------------- 8 files changed, 5 insertions(+), 49 deletions(-) diff --git a/components/combobox/src/auro-combobox.js b/components/combobox/src/auro-combobox.js index a90276b8..4d8a408c 100644 --- a/components/combobox/src/auro-combobox.js +++ b/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); - }); } /** diff --git a/components/menu/demo/api.md b/components/menu/demo/api.md index 5f1bf92c..2ef29b63 100644 --- a/components/menu/demo/api.md +++ b/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` | 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` | Notifies that a an attempt to select a menuoption by matching a value has failed. | -| `auroMenu-selectValueReset` | `CustomEvent` | Notifies that the component value has been reset. | | `auroMenu-selectedOption` | `CustomEvent` | Notifies that a new menuoption selection has been made. | ## Slots diff --git a/components/menu/docs/api.md b/components/menu/docs/api.md index 5ee1cfab..9d2eeb6a 100644 --- a/components/menu/docs/api.md +++ b/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` | 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` | Notifies that a an attempt to select a menuoption by matching a value has failed. | -| `auroMenu-selectValueReset` | `CustomEvent` | Notifies that the component value has been reset. | | `auroMenu-selectedOption` | `CustomEvent` | Notifies that a new menuoption selection has been made. | ## Slots diff --git a/components/menu/src/auro-menu.js b/components/menu/src/auro-menu.js index fb6ae1a3..eeaff5c4 100644 --- a/components/menu/src/auro-menu.js +++ b/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, - })); } } diff --git a/components/select/apiExamples/value.html b/components/select/apiExamples/value.html index 67481623..ece4377b 100644 --- a/components/select/apiExamples/value.html +++ b/components/select/apiExamples/value.html @@ -1,6 +1,5 @@ Set Value to Valid Option Set Value to Invalid Option -Set Value to Undefined

Name diff --git a/components/select/apiExamples/value.js b/components/select/apiExamples/value.js index 367f0aeb..55728dc6 100644 --- 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 index c1201447..df7ef281 100644 --- 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 Set Value to Valid Option Set Value to Invalid Option - Set Value to Undefined

Name @@ -134,7 +133,6 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele ```html Set Value to Valid Option Set Value to Invalid Option -Set Value to Undefined

Name @@ -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; - }) + }); } ``` diff --git a/components/select/src/auro-select.js b/components/select/src/auro-select.js index bebf44ec..4ed42322 100644 --- 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); }); }