[#311] preserve input on unfocus in peopleSearch (#346)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

__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<User[]>((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");
+    });
+  });
 });

src/components/Attendees/PeopleSearch.tsx

@@ -42,6 +42,7 @@ export function PeopleSearch({
   const [loading, setLoading] = useState(false);
   const [options, setOptions] = useState<User[]>([]);
   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];