fix(combobox): prevent spacebar from opening the menu while focusing on chip's close button

packages/calcite-components/src/components.d.ts

@@ -674,7 +674,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Specifies the optional new name of the file after it is downloaded.
+          * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download.
          */
         "download": string | boolean;
         /**
@@ -8059,7 +8059,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Specifies the optional new name of the file after it is downloaded.
+          * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download.
          */
         "download"?: string | boolean;
         /**

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -1918,4 +1918,58 @@ describe("calcite-combobox", () => {
       });
     });
   });
+
+  it("should not open combobox menu with spacebar while focusing on chip's close button", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-combobox label="test" placeholder="placeholder" max-items="10" scale="m">
+        <calcite-combobox-item-group label="Pokemon">
+          <calcite-combobox-item value="Pikachu" text-label="Pikachu"></calcite-combobox-item>
+          <calcite-combobox-item value="Venusaur" text-label="Venusaur"></calcite-combobox-item>
+          <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
+          <calcite-combobox-item-group label="Cutest Pokemon">
+            <calcite-combobox-item value="Bulbasaur" text-label="Bulbasaur"></calcite-combobox-item>
+            <calcite-combobox-item value="Squirtle1" text-label="Squirtle1">
+              <calcite-combobox-item value="Squirtle2" text-label="Squirtle2">
+                <calcite-combobox-item value="Squirtle3" text-label="Squirtle3">
+                  <calcite-combobox-item value="Squirtle4" text-label="Squirtle4"></calcite-combobox-item>
+                </calcite-combobox-item>
+              </calcite-combobox-item>
+            </calcite-combobox-item>
+          </calcite-combobox-item-group>
+        </calcite-combobox-item-group>
+      </calcite-combobox>
+    `);
+
+    const combobox = await page.find("calcite-combobox");
+    const openEvent = page.waitForEvent("calciteComboboxOpen");
+    await combobox.click();
+    await openEvent;
+
+    const item1 = await combobox.find("calcite-combobox-item[value=Pikachu]");
+    await item1.click();
+    const item2 = await combobox.find("calcite-combobox-item[value=Charizard]");
+    await item2.click();
+    const item3 = await combobox.find("calcite-combobox-item[value=Squirtle3]");
+    await item3.click();
+
+    const chips = await page.findAll("calcite-combobox >>> calcite-chip");
+    expect(chips.length).toBe(3);
+
+    const closeEvent = page.waitForEvent("calciteComboboxClose");
+    await combobox.press("Tab");
+    await closeEvent;
+
+    await page.evaluate(() => {
+      const combobox = document.querySelector("calcite-combobox");
+      const chip = combobox.shadowRoot.querySelector("calcite-chip");
+      const closeButton = chip.shadowRoot.querySelector(".close");
+      (closeButton as HTMLElement).click();
+    });
+    await page.waitForChanges();
+
+    const remainingChips = await page.findAll("calcite-combobox >>> calcite-chip");
+    expect(remainingChips.length).toBe(2);
+    expect(await page.find("calcite-combobox")).not.toHaveAttribute("open");
+  });
 });

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -693,6 +693,10 @@ export class Combobox
           }
           event.preventDefault();
         }
+
+        if ((event.target as HTMLElement).closest("calcite-chip")) {
+          event.stopPropagation();
+        }
         break;
       case "Home":
         if (!this.open) {