From 5fa62bc5bf10b73f5c7822ebebfe433449eaa088 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Tue, 26 Nov 2024 16:28:14 -0500 Subject: [PATCH] Fix improper tag references in sl-select (#2287) * fix improper tag references in sl-select * update changelog * prettier * remove cem * update changelog * update changelog --- docs/pages/components/select.md | 10 +++++----- docs/pages/resources/changelog.md | 1 + src/components/select/select.component.ts | 4 ++-- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 15ef3da3..de452824 100644 --- a/docs/pages/components/select.md +++ b/docs/pages/components/select.md @@ -504,17 +504,17 @@ Remember that custom tags are rendered in a shadow root. To style them, you can ### Lazy loading options -Lazy loading options is very hard to get right. `` largely follows how a native `` works. Here are the following conditions: -- If a `` is created without any options, but is given a `value` attribute, its `value` will be `""`, and then when options are added, if any of the options have a value equal to the `` value, the value of the `` will equal that of the option. +- If a `` is created without any options, but is given a `value` attribute, its `value` will be `""`, and then when options are added, if any of the options have a value equal to the `` value, the value of the `` will equal that of the option. -EX: `` will have a value of `""` until `Foo` connects, at which point its value will become `"foo"` when submitting. +EX: `` will have a value of `""` until `Foo` connects, at which point its value will become `"foo"` when submitting. -- If a `` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, _AND_ the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select. +- If a `` with an initial value has multiple values, but only some of the options are present, it will only respect the options that are present, and if a selected option is loaded in later, _AND_ the value of the select has not changed via user interaction or direct property assignment, it will add the selected option to the form value and to the `.value` of the select. -This can be hard to conceptualize, so heres a fairly large example showing how lazy loaded options work with `` and `` when given initial value attributes. Feel free to play around with it in a codepen. +This can be hard to conceptualize, so heres a fairly large example showing how lazy loaded options work with `` and `` when given initial value attributes. Feel free to play around with it in a codepen. ```html:preview
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 06cb52c8..4b711c1e 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -17,6 +17,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added Norwegian translations for Bokmål and Nynorsk [#2268] - Added Ukrainian translation [#2270] - Added support for Enter to `` to align with ARIA APG's [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/) [#2234] +- Fixed a bug in `` where it was using the wrong tag name,. [#2287] - Fixed a bug in `` that caused the navigation icons to be reversed - Fixed a bug in `` that prevented label changes in `` from updating the controller [#1971] - Fixed a bug in `` that caused a console warning in Firefox when typing [#2107] diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index d91adfb2..3af09dc4 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -503,8 +503,8 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon /* @internal - used by options to update labels */ public handleDefaultSlotChange() { - if (!customElements.get('wa-option')) { - customElements.whenDefined('wa-option').then(() => this.handleDefaultSlotChange()); + if (!customElements.get('sl-option')) { + customElements.whenDefined('sl-option').then(() => this.handleDefaultSlotChange()); } const allOptions = this.getAllOptions();