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