Bypass clicks on combobox input to allow indicator clicks (#1)

microsoft · Mar 29, 2024 · ed5923b · ed5923b
1 parent 464bb50
commit ed5923b
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 11 deletions.
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.pw.spec.ts b/packages/web-components/fast-foundation/src/combobox/combobox.pw.spec.ts
@@ -466,4 +466,58 @@ test.describe("Combobox", () => {
 
         await expect(element).toBeFocused();
     });
+
+    test("should close the listbox when the indicator is clicked", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-combobox>
+                    <fast-option>Option 1</fast-option>
+                    <fast-option>Option 2</fast-option>
+                    <fast-option>Option 3</fast-option>
+                </fast-combobox>
+            `;
+        });
+
+        const indicator = element.locator(".indicator");
+
+        await element.evaluate((node: FASTCombobox) => {
+            node.open = true;
+        });
+
+        await expect(element).toHaveAttribute("open");
+
+        await indicator.click();
+
+        await expect(element).not.toHaveAttribute("open");
+    });
+
+    test("should not close the listbox when a disabled option is clicked", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-combobox>
+                    <fast-option>Option 1</fast-option>
+                    <fast-option disabled>Option 2</fast-option>
+                    <fast-option>Option 3</fast-option>
+                </fast-combobox>
+            `;
+        });
+
+        const options = element.locator("fast-option");
+
+        await element.evaluate((node: FASTCombobox) => {
+            node.open = true;
+        });
+
+        await expect(element).toHaveAttribute("open");
+
+        await options.nth(1).click({
+            force: true,
+        });
+
+        await expect(element).toHaveAttribute("open");
+
+        await options.nth(2).click();
+
+        await expect(element).not.toHaveAttribute("open");
+    });
 });
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.ts b/packages/web-components/fast-foundation/src/combobox/combobox.ts
@@ -248,24 +248,26 @@ export class FASTCombobox extends FormAssociatedCombobox {
      * @internal
      */
     public clickHandler(e: MouseEvent): boolean | void {
-        if (this.disabled) {
+        const captured = (e.target as HTMLElement).closest(
+            `option,[role=option]`
+        ) as FASTListboxOption | null;
+
+        if (this.disabled || captured?.disabled) {
             return;
         }
 
         if (this.open) {
-            const captured = (e.target as HTMLElement).closest(
-                `option,[role=option]`
-            ) as FASTListboxOption | null;
-
-            if (!captured || captured.disabled) {
-                this.open = false;
+            if (e.composedPath()[0] === this.control) {
+                this.open = true;
                 return;
             }
 
-            this.selectedOptions = [captured];
-            this.control.value = captured.text;
-            this.clearSelectionRange();
-            this.updateValue(true);
+            if (captured) {
+                this.selectedOptions = [captured];
+                this.control.value = captured.text;
+                this.clearSelectionRange();
+                this.updateValue(true);
+            }
         }
 
         this.open = !this.open;