Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 08:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

🔍 fix: Race Condition in Search Bar Clear Text Handler (#9718)

Browse source
This commit is contained in:
Danny Avila 2025-09-19 07:52:16 -04:00 • committed by GitHub
parent 344e7c44b5
commit 99135a3dc1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 36 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

64
client/src/components/Nav/SearchBar.tsx
View file

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