diff --git a/src/renderer/src/components/ContentSearch.tsx b/src/renderer/src/components/ContentSearch.tsx index a172d40570..6842312137 100644 --- a/src/renderer/src/components/ContentSearch.tsx +++ b/src/renderer/src/components/ContentSearch.tsx @@ -140,7 +140,7 @@ export const ContentSearch = React.forwardRef( const [isCaseSensitive, setIsCaseSensitive] = useState(false) const [isWholeWord, setIsWholeWord] = useState(false) const [allRanges, setAllRanges] = useState([]) - const [currentIndex, setCurrentIndex] = useState(0) + const [currentIndex, setCurrentIndex] = useState(-1) const prevSearchText = useRef('') const { t } = useTranslation() @@ -182,15 +182,18 @@ export const ContentSearch = React.forwardRef( [allRanges, currentIndex] ) - const search = useCallback(() => { - const searchText = searchInputRef.current?.value.trim() ?? null - setSearchCompleted(SearchCompletedState.Searched) - if (target && searchText !== null && searchText !== '') { - const ranges = findRangesInTarget(target, filter, searchText, isCaseSensitive, isWholeWord) - setAllRanges(ranges) - setCurrentIndex(0) - } - }, [target, filter, isCaseSensitive, isWholeWord]) + const search = useCallback( + (jump = false) => { + const searchText = searchInputRef.current?.value.trim() ?? null + setSearchCompleted(SearchCompletedState.Searched) + if (target && searchText !== null && searchText !== '') { + const ranges = findRangesInTarget(target, filter, searchText, isCaseSensitive, isWholeWord) + setAllRanges(ranges) + setCurrentIndex(jump && ranges.length > 0 ? 0 : -1) + } + }, + [target, filter, isCaseSensitive, isWholeWord] + ) const implementation = useMemo( () => ({ @@ -207,7 +210,7 @@ export const ContentSearch = React.forwardRef( requestAnimationFrame(() => { inputEl.focus() inputEl.select() - search() + search(false) }) } else { requestAnimationFrame(() => { @@ -231,11 +234,11 @@ export const ContentSearch = React.forwardRef( setSearchCompleted(SearchCompletedState.NotSearched) }, search: () => { - search() + search(true) locateByIndex(true) }, silentSearch: () => { - search() + search(false) locateByIndex(false) }, focus: () => { @@ -302,7 +305,7 @@ export const ContentSearch = React.forwardRef( useEffect(() => { if (enableContentSearch && searchInputRef.current?.value.trim()) { - search() + search(true) } }, [isCaseSensitive, isWholeWord, enableContentSearch, search]) @@ -365,16 +368,12 @@ export const ContentSearch = React.forwardRef( - {searchCompleted !== SearchCompletedState.NotSearched ? ( - allRanges.length > 0 ? ( - <> - {currentIndex + 1} - / - {allRanges.length} - - ) : ( - {t('common.no_results')} - ) + {searchCompleted !== SearchCompletedState.NotSearched && allRanges.length > 0 ? ( + <> + {currentIndex + 1} + / + {allRanges.length} + ) : ( 0/0 )} @@ -477,10 +476,6 @@ const SearchResultsPlaceholder = styled.span` opacity: 0.5; ` -const NoResults = styled.span` - color: var(--color-text-1); -` - const SearchResultCount = styled.span` color: var(--color-text); `