mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-21 21:50:49 +02:00
🔍 fix: Race Condition in Search Bar Clear Text Handler (#9718)
This commit is contained in:
parent
344e7c44b5
commit
99135a3dc1
1 changed files with 36 additions and 28 deletions
|
@ -24,17 +24,22 @@ 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 });
|
||||
const clearSearch = useCallback(
|
||||
(pathname?: string) => {
|
||||
if (pathname?.includes('/search') || pathname === '/c/new') {
|
||||
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);
|
||||
setText('');
|
||||
setSearchState((prev) => ({
|
||||
|
@ -43,16 +48,21 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
|
|||
debouncedQuery: '',
|
||||
isTyping: false,
|
||||
}));
|
||||
clearSearch();
|
||||
clearSearch(pathname);
|
||||
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;
|
||||
if (e.key === 'Backspace' && value === '') {
|
||||
clearText();
|
||||
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}
|
||||
>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue