diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts
index 14144965..2ac7534f 100644
--- a/tests/ComboBox/ComboBox.test.ts
+++ b/tests/ComboBox/ComboBox.test.ts
@@ -141,12 +141,24 @@ describe("ComboBox", () => {
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 clear input when clicking clear button", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(ComboBox, { props: { selectedId: "1" } });
+
+ expect(consoleLog).not.toBeCalled();
+ const clearButton = screen.getByRole("button", { name: /clear/i });
+ await user.click(clearButton);
+
+ expect(screen.getByRole("textbox")).toHaveValue("");
+ expect(consoleLog).toHaveBeenCalledWith("clear", "clear");
+ });
+
it("should handle disabled items", async () => {
render(ComboBoxCustom);
@@ -184,9 +196,26 @@ describe("ComboBox", () => {
it("should programmatically clear selection", async () => {
render(ComboBoxCustom, { props: { selectedId: "1" } });
- expect(screen.getByRole("textbox")).toHaveValue("Email");
+ const textbox = screen.getByRole("textbox");
+ expect(textbox).toHaveValue("Email");
await user.click(screen.getByText("Clear"));
- expect(screen.getByRole("textbox")).toHaveValue("");
+ expect(textbox).toHaveValue("");
+ expect(textbox).toHaveFocus();
+ });
+
+ it("should not re-focus textbox if clearOptions.focus is false", async () => {
+ render(ComboBoxCustom, {
+ props: {
+ selectedId: "1",
+ clearOptions: { focus: false },
+ },
+ });
+
+ const textbox = screen.getByRole("textbox");
+ expect(textbox).toHaveValue("Email");
+ await user.click(screen.getByText("Clear"));
+ expect(textbox).toHaveValue("");
+ expect(textbox).not.toHaveFocus();
});
it("should close menu on Escape key", async () => {
diff --git a/tests/ComboBox/ComboBoxCustom.test.svelte b/tests/ComboBox/ComboBoxCustom.test.svelte
index 221aa005..85fe7f06 100644
--- a/tests/ComboBox/ComboBoxCustom.test.svelte
+++ b/tests/ComboBox/ComboBoxCustom.test.svelte
@@ -11,6 +11,7 @@
];
export let selectedId: string | undefined = undefined;
export let direction: "top" | "bottom" = "bottom";
+ export let clearOptions: { focus?: boolean } = {};
export let shouldFilterItem = (item: ComboBoxItem, value: string) =>
item.text.toLowerCase().includes(value.toLowerCase());
export let itemToString = (item: ComboBoxItem) => item.text;
@@ -33,4 +34,6 @@
Item {item.text}
-
+