[archives/fast-element-1] fix(cherry-pick): close combobox even if no selection (#6942)

* close combobox if indicator is clicked and no selection is made

* Change files

---------

Co-authored-by: Christopher Holt <=>

Author: chrisdholt

change/@microsoft-fast-foundation-c128481d-c811-401e-9be7-71f80b0350a1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: close combobox if indicator is clicked and no selection is made",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "=",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/combobox/combobox.spec.ts

@@ -207,6 +207,22 @@ describe("Combobox", () => {
         });
     });
 
+    it.only("should close the listbox if the indicator is clicked without making a selection", async () => {
+        const { element, connect, disconnect } = await setup();
+
+        await connect();
+
+        element.click(); // open dropdown
+
+        expect(element.open).to.be.true;
+
+        element.click();
+
+        expect(element.open).to.be.false;
+
+        await disconnect();
+    });
+
     it("should emit a 'change' event when the user clicks away after selecting option in dropdown", async () => {
         const { element, connect, disconnect } = await setup();
 

packages/web-components/fast-foundation/src/combobox/combobox.ts

@@ -274,23 +274,25 @@ export class Combobox extends FormAssociatedCombobox {
      * @internal
      */
     public clickHandler(e: MouseEvent): boolean | void {
-        if (this.disabled) {
+        const captured = (e.target as HTMLElement).closest(
+            `option,[role=option]`
+        ) as ListboxOption | null;
+
+        if (this.disabled || captured?.disabled) {
             return;
         }
 
         if (this.open) {
-            const captured = (e.target as HTMLElement).closest(
-                `option,[role=option]`
-            ) as ListboxOption | 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;