Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-09-22 08:12:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🔍 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

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

@ -24,17 +24,22 @@ 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 });
navigate('/c/new');
} }
}, [newConversation, location.pathname, navigate]); },
[newConvo, navigate, queryClient],
);
const clearText = useCallback(() => { const clearText = useCallback(
(pathname?: string) => {
setShowClearIcon(false); setShowClearIcon(false);
setText(''); setText('');
setSearchState((prev) => ({ setSearchState((prev) => ({
@ -43,16 +48,21 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
debouncedQuery: '', debouncedQuery: '',
isTyping: false, isTyping: false,
})); }));
clearSearch(); clearSearch(pathname);
inputRef.current?.focus(); inputRef.current?.focus();
}, [setSearchState, clearSearch]); },
[setSearchState, clearSearch],
);
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyUp = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
const { value } = e.target as HTMLInputElement; const { value } = e.target as HTMLInputElement;
if (e.key === 'Backspace' && value === '') { if (e.key === 'Backspace' && value === '') {
clearText(); 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}
> >