diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 138459bf..6850a919 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -339,7 +339,7 @@ } else if (key === "ArrowUp") { change(-1); } else if (key === "Escape") { - open = false; + clear(); } }} on:keyup diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts index 6d55201b..b0cb62e6 100644 --- a/tests/ComboBox/ComboBox.test.ts +++ b/tests/ComboBox/ComboBox.test.ts @@ -305,6 +305,8 @@ describe("ComboBox", () => { it("should close menu on Escape key", async () => { render(ComboBox); + expect(screen.getByRole("textbox")).toHaveValue(""); + const input = screen.getByRole("textbox"); await user.click(input); @@ -313,6 +315,30 @@ describe("ComboBox", () => { await user.keyboard("{Escape}"); expect(dropdown).not.toBeVisible(); + expect(screen.getByRole("textbox")).toHaveValue(""); + expect(screen.getByRole("textbox")).toHaveFocus(); + }); + + it("should close menu and clear selection on Escape key", async () => { + render(ComboBox, { + props: { + selectedId: "1", + value: "Email", + }, + }); + + expect(screen.getByRole("textbox")).toHaveValue("Email"); + + const input = screen.getByRole("textbox"); + await user.click(input); + + const dropdown = screen.getAllByRole("listbox")[1]; + expect(dropdown).toBeVisible(); + + await user.keyboard("{Escape}"); + expect(dropdown).not.toBeVisible(); + expect(screen.getByRole("textbox")).toHaveValue(""); + expect(screen.getByRole("textbox")).toHaveFocus(); }); it("should use custom shouldFilterItem function", async () => {