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 = ({ 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( + , + ); + + 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();