From 922676a7cc25dc69c4ff08e143352c40f7b948e7 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Tue, 2 Jul 2024 10:38:20 +0100
Subject: [PATCH] Clear autocomplete input on selection accept (#12709)

* Clear autocomplete input on selection accept

Fixes https://github.com/element-hq/element-web/issues/27194

* Playwright: use rust crypto for the bot user (#12708)

... because legacy crypto is legacy

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
---
 .../structures/AutocompleteInput.tsx          |  2 ++
 .../structures/AutocompleteInput-test.tsx     | 30 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/structures/AutocompleteInput.tsx b/src/components/structures/AutocompleteInput.tsx
index 9f16211022..65d48e45f6 100644
--- a/src/components/structures/AutocompleteInput.tsx
+++ b/src/components/structures/AutocompleteInput.tsx
@@ -99,6 +99,8 @@ export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({
 
         onSelectionChange(newSelection);
         focusEditor();
+        setQuery("");
+        setSuggestions([]);
     };
 
     const removeSelection = (completion: ICompletion): void => {
diff --git a/test/components/structures/AutocompleteInput-test.tsx b/test/components/structures/AutocompleteInput-test.tsx
index 0baa43fb44..48c7d05600 100644
--- a/test/components/structures/AutocompleteInput-test.tsx
+++ b/test/components/structures/AutocompleteInput-test.tsx
@@ -246,6 +246,36 @@ describe("AutocompleteInput", () => {
         expect(onSelectionChangeMock).toHaveBeenCalledWith([mockCompletion[0]]);
     });
 
+    it("should clear text field and suggestions when a suggestion is accepted", async () => {
+        const mockProvider = constructMockProvider(mockCompletion);
+        const onSelectionChangeMock = jest.fn();
+
+        const { container } = render(
+            <AutocompleteInput
+                provider={mockProvider}
+                placeholder="Search ..."
+                selection={[]}
+                onSelectionChange={onSelectionChangeMock}
+            />,
+        );
+
+        const input = getEditorInput();
+
+        act(() => {
+            fireEvent.focus(input);
+            fireEvent.change(input, { target: { value: "user" } });
+        });
+
+        const suggestions = await within(container).findAllByTestId("autocomplete-suggestion-item", { exact: false });
+
+        act(() => {
+            fireEvent.mouseDown(suggestions[0]);
+        });
+
+        expect(input).toHaveValue("");
+        expect(within(container).queryAllByTestId("autocomplete-suggestion-item", { exact: false })).toHaveLength(0);
+    });
+
     afterAll(() => {
         jest.clearAllMocks();
         jest.resetModules();