Merge branch 'master' into users/zoepeterson/fix-standards-link

microsoft · Apr 26, 2024 · fe0acd5 · fe0acd5
2 parents 2704b0d + 543a69c
commit fe0acd5
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 10 deletions.
diff --git a/change/@microsoft-fast-foundation-47afe4a7-9451-4c4c-beba-70305e6b600e.json b/change/@microsoft-fast-foundation-47afe4a7-9451-4c4c-beba-70305e6b600e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(combobox): close the combobox even if there's no selection",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
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,23 +248,25 @@ 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) {
+            if (e.composedPath()[0] === this.control) {
                 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;