diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index b36472ba..07a89433 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -175,11 +175,18 @@ filteredItems = []; if (!selectedItem) { selectedId = undefined; + // Only reset value if the input is not focused + if (!ref.contains(document.activeElement)) { + value = ""; + } highlightedIndex = -1; highlightedId = undefined; } else { - // programmatically set value - value = itemToString(selectedItem); + // Only set value if the input is not focused + if (!ref.contains(document.activeElement)) { + // programmatically set value + value = itemToString(selectedItem); + } } } }); @@ -282,13 +289,7 @@ open = true; } }} - on:keydown={(e) => { - // If there's a selection and user types a printable character, clear selection immediately - if (e.key.length === 1 && selectedItem) { - selectedId = undefined; - selectedItem = undefined; - } - }} + on:keydown on:keydown|stopPropagation={(e) => { const { key } = e; if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) { diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts index c2ee66b6..14144965 100644 --- a/tests/ComboBox/ComboBox.test.ts +++ b/tests/ComboBox/ComboBox.test.ts @@ -127,6 +127,24 @@ describe("ComboBox", () => { const options = screen.getAllByRole("option"); expect(options).toHaveLength(1); expect(options[0]).toHaveTextContent("Email"); + + await user.clear(input); + expect(input).toHaveValue(""); + expect(screen.getAllByRole("option")).toHaveLength(3); + + await user.click(document.body); + expect(input).not.toHaveFocus(); + + await user.keyboard("{Tab}"); + expect(input).toHaveFocus(); + + await user.type(input, "a"); + await user.click(screen.getAllByRole("option")[1]); + expect(input).toHaveValue("Email"); + + await user.click(document.body); + expect(input).not.toHaveFocus(); + expect(screen.queryByRole("option")).not.toBeInTheDocument(); }); it("should handle disabled items", async () => {