[WEB-1690] fix: always show the search input if search query is present (#4901)

* fix: don't hide search input if search query is present

* chore: update logic

* chore: update dependency aray

web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Search, Briefcase, X, ListFilter } from "lucide-react";
@@ -82,6 +82,10 @@ export const ProjectsListHeader = observer(() => {
     }
   };
 
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
   const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
 
   return (

web/core/components/cycles/cycles-view-header.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
 import { ListFilter, Search, X } from "lucide-react";
@@ -63,6 +63,10 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
 
   const isFiltersApplied = calculateTotalFilters(currentProjectFilters ?? {}) !== 0;
 
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
   return (
     <div className="flex items-center gap-3">
       {!isSearchOpen && (

web/core/components/modules/module-view-header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { FC, useCallback, useRef, useState } from "react";
+import React, { FC, useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
@@ -26,13 +26,10 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 export const ModuleViewHeader: FC = observer(() => {
   // refs
   const inputRef = useRef<HTMLInputElement>(null);
-
   // router
   const { projectId } = useParams();
-
   // hooks
   const { isMobile } = usePlatformOS();
-
   // store hooks
   const {
     workspace: { workspaceMemberIds },
@@ -85,6 +82,10 @@ export const ModuleViewHeader: FC = observer(() => {
     if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
   });
 
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
   const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0 || displayFilters?.favorites;
 
   return (

web/core/components/pages/list/search-input.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useRef } from "react";
+import { FC, useState, useRef, useEffect } from "react";
 import { Search, X } from "lucide-react";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -31,6 +31,10 @@ export const PageSearchInput: FC<Props> = (props) => {
     }
   };
 
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
   return (
     <>
       {!isSearchOpen && (

web/core/components/views/view-list-header.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
 import { Search, X } from "lucide-react";
@@ -11,10 +11,9 @@ import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 export const ViewListHeader = observer(() => {
   // states
   const [isSearchOpen, setIsSearchOpen] = useState(false);
-  // const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
   // refs
   const inputRef = useRef<HTMLInputElement>(null);
-
+  // store hooks
   const { searchQuery, updateSearchQuery } = useProjectView();
 
   // handlers
@@ -33,6 +32,10 @@ export const ViewListHeader = observer(() => {
     if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
   });
 
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
   return (
     <div className="h-full flex items-center gap-2">
       <div className="flex items-center">