Remove lag in search field (#29885)

* fix(search): remove search input lag

* test(search): add search field update test

Author: florianduros

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -179,7 +179,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
     onSearchChange,
     onSearchCancel,
     focusRoomSearch,
-    searchTerm,
+    searchTerm = "",
 }) => {
     const cli = useContext(MatrixClientContext);
 
@@ -245,6 +245,13 @@ const RoomSummaryCard: React.FC<IProps> = ({
         }
     });
 
+    // The search field is controlled and onSearchChange is debounced in RoomView,
+    // so we need to set the value of the input right away
+    const [searchValue, setSearchValue] = useState(searchTerm);
+    useEffect(() => {
+        setSearchValue(searchTerm);
+    }, [searchTerm]);
+
     const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
     const roomInfo = (
         <header className="mx_RoomSummaryCard_container">
@@ -320,9 +327,10 @@ const RoomSummaryCard: React.FC<IProps> = ({
                 placeholder={_t("room|search|placeholder")}
                 name="room_message_search"
                 onChange={(e) => {
+                    setSearchValue(e.currentTarget.value);
                     onSearchChange(e.currentTarget.value);
                 }}
-                value={searchTerm}
+                value={searchValue}
                 className="mx_no_textinput"
                 ref={searchInputRef}
                 autoFocus={focusRoomSearch}

test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -11,6 +11,7 @@ import { render, fireEvent, screen, waitFor } from "jest-matrix-react";
 import { EventType, MatrixEvent, Room, type MatrixClient, JoinRule } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { mocked, type MockedObject } from "jest-mock";
+import userEvent from "@testing-library/user-event";
 
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import RoomSummaryCard from "../../../../../src/components/views/right_panel/RoomSummaryCard";
@@ -166,6 +167,20 @@ describe("<RoomSummaryCard />", () => {
             fireEvent.keyDown(getByPlaceholderText("Search messages…"), { key: "Escape" });
             expect(onSearchCancel).toHaveBeenCalled();
         });
+        it("should update the search field value correctly", async () => {
+            const user = userEvent.setup();
+
+            const onSearchChange = jest.fn();
+            const { getByPlaceholderText } = getComponent({
+                onSearchChange,
+            });
+
+            const searchInput = getByPlaceholderText("Search messages…");
+            await user.type(searchInput, "test query");
+
+            expect(onSearchChange).toHaveBeenCalledWith("test query");
+            expect(searchInput).toHaveValue("test query");
+        });
     });
 
     it("opens room file panel on button click", () => {