fix select not opening after disabled (#910)

docs/docs/resources/changelog.md

@@ -17,8 +17,9 @@ During the alpha period, things might break! We take breaking changes very serio
 - 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparer>` and improved compatibility for non-image content
 - Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `<wa-icon>`
 - Fixed a bug that caused `<wa-radio-group>` to have an undesired margin below it
-- Fixed a bug in `<wa-select>` 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 `<wa-select>` that caused incorrect spacing of icons
+- Fixed a bug in `<wa-select>` that caused the listbox to now show after being disabled
 - Fixed a bug in `<wa-radio-group>` 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

src/components/select/select.test.ts

@@ -795,6 +795,37 @@ describe('<wa-select>', () => {
           });
         });
       });
+
+      // https://github.com/shoelace-style/webawesome-alpha/issues/263
+      it('should allow interaction after being disabled and re-enabled', async () => {
+        const el = await fixture<WaSelect>(html`
+          <wa-select label="Select one">
+            <wa-option value="option-1">Option 1</wa-option>
+            <wa-option value="option-2">Option 2</wa-option>
+            <wa-option value="option-3">Option 3</wa-option>
+          </wa-select>
+        `);
+        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;
+      });
     });
   }
 });

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();
     }
   }