diff --git a/src/components/MultiSelect/MultiSelect.test.tsx b/src/components/MultiSelect/MultiSelect.test.tsx index 72a56e73..9c57bfed 100644 --- a/src/components/MultiSelect/MultiSelect.test.tsx +++ b/src/components/MultiSelect/MultiSelect.test.tsx @@ -228,7 +228,7 @@ it("closes the dropdown when clicking outside of the dropdown", async () => { }); it("closes the dropdown when clicking on the button", async () => { - render(); + render(); await userEvent.click(screen.getByRole("combobox")); expect(screen.getByRole("listbox")).toBeInTheDocument(); await userEvent.click(screen.getByRole("combobox")); @@ -353,6 +353,14 @@ it("opens and closes the dropdown on click", async () => { expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); }); +it("doesn't clear the input on click", async () => { + render(); + const input = screen.getByRole("combobox"); + await userEvent.type(input, "hello"); + await userEvent.click(input); + expect(input).toHaveValue("hello"); +}); + it("can render without sorting alphabetically", async () => { const itemsUnsorted = [ { label: "item B", value: 2 }, diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index cf9535ca..b889291a 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -364,6 +364,13 @@ export const MultiSelect: React.FC = ({ aria-label={label || placeholder || "Search"} disabled={disabled} autoComplete="off" + onMouseDown={(event) => { + // When displayed as an input, clicking inside the input should not clear + // the text (e.g. if the user wants to edit what they've typed). + if (variant === "search") { + event.stopPropagation(); + } + }} onChange={(value) => { updateFilter(value); // reopen if dropdown has been closed via ESC