diff --git a/__test__/components/PeopleSearch.test.tsx b/__test__/components/PeopleSearch.test.tsx index 3d5c7b5..afaf8d8 100644 --- a/__test__/components/PeopleSearch.test.tsx +++ b/__test__/components/PeopleSearch.test.tsx @@ -216,4 +216,35 @@ describe("PeopleSearch", () => { await searchPromise; }); }); + + it("retains input value when field loses focus (blur)", async () => { + let resolveSearch: (value: User[]) => void; + const searchPromise = new Promise((resolve) => { + resolveSearch = resolve; + }); + mockedSearchUsers.mockReturnValueOnce(searchPromise); + await act(async () => { + setup(); + }); + + const input = screen.getByRole("combobox"); + + await act(async () => { + userEvent.type(input, "Test"); + }); + + await waitFor(() => { + expect(mockedSearchUsers).toHaveBeenCalledWith("Test", ["user"]); + }); + + expect(input).toHaveValue("Test"); + + await act(async () => { + input.blur(); + }); + + await waitFor(() => { + expect(input).toHaveValue("Test"); + }); + }); }); diff --git a/src/components/Attendees/PeopleSearch.tsx b/src/components/Attendees/PeopleSearch.tsx index dc3bf26..9ae62b5 100644 --- a/src/components/Attendees/PeopleSearch.tsx +++ b/src/components/Attendees/PeopleSearch.tsx @@ -42,6 +42,7 @@ export function PeopleSearch({ const [loading, setLoading] = useState(false); const [options, setOptions] = useState([]); const [hasSearched, setHasSearched] = useState(false); + const [isOpen, setIsOpen] = useState(false); const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); @@ -100,7 +101,11 @@ export function PeopleSearch({ multiple options={options} autoComplete={false} - open={!!query && (loading || hasSearched)} + clearOnBlur={false} + blurOnSelect={true} + open={isOpen && !!query && (loading || hasSearched)} + onOpen={() => setIsOpen(true)} + onClose={() => setIsOpen(false)} disabled={disabled} loading={loading} filterOptions={(x) => x} @@ -116,6 +121,7 @@ export function PeopleSearch({ }} filterSelectedOptions value={selectedUsers} + inputValue={query} onInputChange={(event, value) => setQuery(value)} onChange={(event, value) => { const last = value[value.length - 1];