fix: don't reset search on click within input in multiselect

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(<MultiSelect items={items} />);
+  render(<MultiSelect items={items} variant="condensed" />);
   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(<MultiSelect variant="search" items={items} />);
+  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 },

src/components/MultiSelect/MultiSelect.tsx

@@ -364,6 +364,13 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
               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