diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 618a4a29a6f..3438a79de8c 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -1919,6 +1919,54 @@ 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` + + + + + + + + + + + + + + + + + + `); + + const combobox = await page.find("calcite-combobox"); + const openEvent = page.waitForEvent("calciteComboboxOpen"); + await combobox.click(); + await openEvent; + + await (await combobox.find("calcite-combobox-item[value=Pikachu]")).click(); + await (await combobox.find("calcite-combobox-item[value=Charizard]")).click(); + await (await combobox.find("calcite-combobox-item[value=Squirtle3]")).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; + + const wrapper = await page.find("calcite-combobox >>> .wrapper"); + const close = await wrapper.find("calcite-chip >>> .close"); + await close.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"); + }); + it("prevents toggling items when combobox is closed", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 845e1e33c19..177772973a8 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -693,6 +693,10 @@ export class Combobox } event.preventDefault(); } + + if (event.composedPath().find((el: HTMLElement) => el.tagName === "CALCITE-CHIP")) { + event.preventDefault(); + } break; case "Home": if (!this.open) {