fix(listbox): clicking disabled option no longer deselects current selection (#247)

Author: ianmcburnie

docs/ui/makeup-combobox/index.min.js

@@ -131,7 +131,8 @@ function _onListboxKeyDown(e) {
   }
 }
 function _onListboxClick(e) {
-  if (e.target.closest("[role=option]")) {
+  const optionEl = e.target.closest("[role=option]");
+  if (optionEl && optionEl.getAttribute("aria-disabled") !== "true") {
     this.collapse();
   }
 }

docs/ui/makeup-combobox/index.min.js.map

@@ -119,7 +119,8 @@ function _onListboxKeyDown(e) {
   }
 }
 function _onListboxClick(e) {
-  if (e.target.closest("[role=option]")) {
+  const optionEl = e.target.closest("[role=option]");
+  if (optionEl && optionEl.getAttribute("aria-disabled") !== "true") {
     this.collapse();
   }
 }

docs/ui/makeup-listbox-button/index.min.js

@@ -139,7 +139,9 @@ function _onListboxKeyDown(e) {
 }
 
 function _onListboxClick(e) {
-  if (e.target.closest("[role=option]")) {
+  const optionEl = e.target.closest("[role=option]");
+
+  if (optionEl && optionEl.getAttribute("aria-disabled") !== "true") {
     this.collapse();
   }
 }

docs/ui/makeup-listbox-button/index.min.js.map

@@ -96,6 +96,18 @@ test.describe("given a listbox-button for manual selection", function () {
       const disabledOptionEl = await contentEl.locator(".listbox-button__option[aria-disabled='true']").first();
       await expect(disabledOptionEl).not.toBeFocused();
     });
+
+    test("should not collapse overlay when clicking a disabled option", async function ({ page }) {
+      const container = page.locator("#manual-selected");
+      const btn = container.locator("button");
+      const content = container.locator(".listbox-button__listbox");
+      const disabledOptionEl = content.locator(".listbox-button__option[aria-disabled='true']").first();
+
+      await btn.click();
+      await expect(content).toBeVisible();
+      await disabledOptionEl.click({ force: true });
+      await expect(content).toBeVisible();
+    });
   });
 });
 
@@ -188,6 +200,18 @@ test.describe("given a listbox-button for automatic selection", function () {
       const disabledOptionEl = await contentEl.locator(".listbox-button__option[aria-disabled='true']").first();
       await expect(disabledOptionEl).not.toBeFocused();
     });
+
+    test("should not collapse overlay when clicking a disabled option", async function ({ page }) {
+      const container = page.locator("#automatic-selected");
+      const btn = container.locator("button");
+      const content = container.locator(".listbox-button__listbox");
+      const disabledOptionEl = content.locator(".listbox-button__option[aria-disabled='true']").first();
+
+      await btn.click();
+      await expect(content).toBeVisible();
+      await disabledOptionEl.click({ force: true });
+      await expect(content).toBeVisible();
+    });
   });
 });