From 543a69ce71ea79322a86dcbb5adbfe1f451a880a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zo=C3=AB=20Peterson?= <zoelwpeterson@gmail.com>
Date: Tue, 23 Apr 2024 23:36:54 -0500
Subject: [PATCH] fix(combobox): close the combobox even if there's no
 selection (#6923)

* fix(combobox): close the combobox even if there's no selection

* Change files

* pr feedback

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

* remove redundant line

---------

Co-authored-by: John Kreitlow <863023+radium-v@users.noreply.github.com>
---
 ...-47afe4a7-9451-4c4c-beba-70305e6b600e.json |  7 +++
 .../src/combobox/combobox.pw.spec.ts          | 54 +++++++++++++++++++
 .../fast-foundation/src/combobox/combobox.ts  | 22 ++++----
 3 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-47afe4a7-9451-4c4c-beba-70305e6b600e.json

diff --git a/change/@microsoft-fast-foundation-47afe4a7-9451-4c4c-beba-70305e6b600e.json b/change/@microsoft-fast-foundation-47afe4a7-9451-4c4c-beba-70305e6b600e.json
new file mode 100644
index 00000000000..20547c3ba93
--- /dev/null
+++ 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": "zoepeterson@microsoft.com",
+  "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
index ff488599bdd..3b890c35cd9 100644
--- 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
index dd037883a64..eb9ae7275ac 100644
--- 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;