From 99135a3dc1a26c0fce3f490e6655c5ea6075e529 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 19 Sep 2025 07:52:16 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8D=20fix:=20Race=20Condition=20in=20S?=
 =?UTF-8?q?earch=20Bar=20Clear=20Text=20Handler=20(#9718)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Nav/SearchBar.tsx | 64 ++++++++++++++-----------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Nav/SearchBar.tsx b/client/src/components/Nav/SearchBar.tsx
index 891d667e1..1e23f757e 100644
--- a/client/src/components/Nav/SearchBar.tsx
+++ b/client/src/components/Nav/SearchBar.tsx
@@ -24,35 +24,45 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
   const inputRef = useRef<HTMLInputElement>(null);
   const [showClearIcon, setShowClearIcon] = useState(false);
 
-  const { newConversation } = useNewConvo();
+  const { newConversation: newConvo } = useNewConvo();
   const [search, setSearchState] = useRecoilState(store.search);
 
-  const clearSearch = useCallback(() => {
-    if (location.pathname.includes('/search')) {
-      newConversation({ disableFocus: true });
-      navigate('/c/new', { replace: true });
-    }
-  }, [newConversation, location.pathname, navigate]);
+  const clearSearch = useCallback(
+    (pathname?: string) => {
+      if (pathname?.includes('/search') || pathname === '/c/new') {
+        queryClient.removeQueries([QueryKeys.messages]);
+        newConvo({ disableFocus: true });
+        navigate('/c/new');
+      }
+    },
+    [newConvo, navigate, queryClient],
+  );
 
-  const clearText = useCallback(() => {
-    setShowClearIcon(false);
-    setText('');
-    setSearchState((prev) => ({
-      ...prev,
-      query: '',
-      debouncedQuery: '',
-      isTyping: false,
-    }));
-    clearSearch();
-    inputRef.current?.focus();
-  }, [setSearchState, clearSearch]);
+  const clearText = useCallback(
+    (pathname?: string) => {
+      setShowClearIcon(false);
+      setText('');
+      setSearchState((prev) => ({
+        ...prev,
+        query: '',
+        debouncedQuery: '',
+        isTyping: false,
+      }));
+      clearSearch(pathname);
+      inputRef.current?.focus();
+    },
+    [setSearchState, clearSearch],
+  );
 
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const { value } = e.target as HTMLInputElement;
-    if (e.key === 'Backspace' && value === '') {
-      clearText();
-    }
-  };
+  const handleKeyUp = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      const { value } = e.target as HTMLInputElement;
+      if (e.key === 'Backspace' && value === '') {
+        clearText(location.pathname);
+      }
+    },
+    [clearText, location.pathname],
+  );
 
   const sendRequest = useCallback(
     (value: string) => {
@@ -85,8 +95,6 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
     debouncedSetDebouncedQuery(value);
     if (value.length > 0 && location.pathname !== '/search') {
       navigate('/search', { replace: true });
-    } else if (value.length === 0 && location.pathname === '/search') {
-      navigate('/c/new', { replace: true });
     }
   };
 
@@ -132,7 +140,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
           showClearIcon ? 'opacity-100' : 'opacity-0',
           isSmallScreen === true ? 'right-[16px]' : '',
         )}
-        onClick={clearText}
+        onClick={() => clearText(location.pathname)}
         tabIndex={showClearIcon ? 0 : -1}
         disabled={!showClearIcon}
       >