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

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

View file

@ -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}
>