[fix] close search bar on navigation back event

cupoftea4 · Nov 17, 2024 · be3150e · be3150e
1 parent 74a9636
commit be3150e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/features/header/HomeHeader.tsx b/src/features/header/HomeHeader.tsx
@@ -23,6 +23,14 @@ const HeaderPanel: FC<OwnProps> = ({ timetableType, className }) => {
   const { isFocused, blur, focus } = useDatalistFocus();
   const [showSearchBar, setShowSearchBar] = useState(!shouldShrinkSearchBar || isFocused);
 
+  useEffect(() => {
+    const onPopstate = () => setShowSearchBar(false);
+    window.addEventListener("popstate", onPopstate);
+    return () => {
+      window.removeEventListener("popstate", onPopstate);
+    };
+  }, []);
+
   useEffect(() => {
     if (isFocused) {
       setShowSearchBar(true);

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -59,11 +59,12 @@ const HomePage: FC<OwnProps> = ({ timetableType }) => {
         t && navigate(t);
       });
     }
-    window.onpopstate = () => {
+    const onPopstate = () => {
       setSelectedSecond(null);
     };
+    window.addEventListener("popstate", onPopstate);
     return () => {
-      window.onpopstate = null;
+      window.removeEventListener("popstate", onPopstate);
     };
   }, [force, navigate, timetableType]);