diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 52664ac9cb..19b04b6a27 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -179,7 +179,7 @@ const RoomSummaryCard: React.FC = ({ onSearchChange, onSearchCancel, focusRoomSearch, - searchTerm, + searchTerm = "", }) => { const cli = useContext(MatrixClientContext); @@ -245,6 +245,13 @@ const RoomSummaryCard: React.FC = ({ } }); + // 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 = (
@@ -320,9 +327,10 @@ const RoomSummaryCard: React.FC = ({ 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} diff --git a/test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx b/test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx index be1b99a608..3d0cdb91f2 100644 --- a/test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx +++ b/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("", () => { 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", () => {