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(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) => { - const { value } = e.target as HTMLInputElement; - if (e.key === 'Backspace' && value === '') { - clearText(); - } - }; + const handleKeyUp = useCallback( + (e: React.KeyboardEvent) => { + 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 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 clearText(location.pathname)} tabIndex={showClearIcon ? 0 : -1} disabled={!showClearIcon} >