824 unable to select time all rooms page (#827)

frontend/__tests__/AllRoomsPage.test.tsx

@@ -1,14 +1,15 @@
 import "@testing-library/jest-dom";
 
 import { createTheme, ThemeProvider } from "@mui/material";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 
 import AllRoomsFilter from "../components/AllRoomsFilter";
 import Room from "../components/AllRoomsRoom";
 import AllRoomsSearchBar from "../components/AllRoomsSearchBar";
 import NavBar from "../components/NavBar";
 import store from "../redux/store";
+import renderWithRedux from "./utils/renderWithRedux";
 
 describe("AllRooms page", () => {
   it("renders AllRooms top icon", () => {
@@ -117,5 +118,21 @@ describe("AllRooms page", () => {
       expect(room).toBeInTheDocument();
       expect(availability).toBeInTheDocument();
     });
+
+    it("allows user to change time in TimePicker", () => {
+      const fixedDate = new Date("2026-06-22T:13:00:00");
+
+      const { container } = renderWithRedux(<AllRoomsSearchBar />, {
+        preloadedState: { datetime: { value: fixedDate } },
+      });
+
+      const inputs = container.querySelectorAll("input");
+
+      // There are only two inputs and the second is the time
+      const enterTime = inputs[1];
+      fireEvent.change(enterTime, { target: { value: "02:00 PM" } });
+
+      expect(enterTime).not.toHaveValue("01:00 PM");
+    });
   });
 });

frontend/components/AllRoomsSearchBar.tsx

@@ -42,7 +42,7 @@ export default function AllRoomsSearchBar() {
         />
         <TimePicker
           label="Start Time"
-          value={datetime}
+          defaultValue={datetime}
           sx={{ flex: 1 }}
           onAccept={(value: Date | null) =>
             value && dispatch(setDatetime(toSydneyTime(value)))