diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index d79e67411..78b83b29c 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -17,8 +17,9 @@ During the alpha period, things might break! We take breaking changes very serio - 🚨 BREAKING: Renamed `` to `` and improved compatibility for non-image content - Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `` - Fixed a bug that caused `` to have an undesired margin below it -- Fixed a bug in `` that caused incorrect spacing of icons - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control +- Fixed a bug in `` that caused incorrect spacing of icons +- Fixed a bug in `` that caused the listbox to now show after being disabled - Fixed a bug in `` that prevented radio buttons from validating - Improved native radio alignment - Improved the `.wa-cloak` utility class so all FOUCE-related solutions are 100% opt-in diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts index ca302c03a..891356216 100644 --- a/src/components/select/select.test.ts +++ b/src/components/select/select.test.ts @@ -795,6 +795,37 @@ describe('', () => { }); }); }); + + // https://github.com/shoelace-style/webawesome-alpha/issues/263 + it('should allow interaction after being disabled and re-enabled', async () => { + const el = await fixture(html` + + Option 1 + Option 2 + Option 3 + + `); + const popup = el.shadowRoot!.querySelector('wa-popup'); + + // First disable the select + el.disabled = true; + await el.updateComplete; + + // Wait 500ms + await aTimeout(500); + + // Re-enable the select + el.disabled = false; + await el.updateComplete; + + // Click on the select to open the dropdown + await clickOnElement(el, 'center', 0, 8); // centered + 8px down into the listbox + await el.updateComplete; + await aTimeout(500); // wait to make sure the listbox doesn't close afterwards + + // Get the popup element and check its active state + expect(popup?.active).to.be.true; + }); }); } }); diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 648ff52a4..c14756518 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -746,10 +746,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { @watch('disabled', { waitUntilFirstUpdate: true }) handleDisabledChange() { - // Close the listbox when the control is disabled - if (this.disabled) { + // Close the listbox when the control is open and disabled + if (this.disabled && this.open) { this.open = false; - this.handleOpenChange(); } }