diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 4ec4e85e..07a89433 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -175,12 +175,18 @@ filteredItems = []; if (!selectedItem) { selectedId = undefined; - value = ""; + // 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); + } } } }); 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 () => {