diff --git a/src/components/navigator/views/search/NavigatorSearchView.tsx b/src/components/navigator/views/search/NavigatorSearchView.tsx index e1daa11..effcc68 100644 --- a/src/components/navigator/views/search/NavigatorSearchView.tsx +++ b/src/components/navigator/views/search/NavigatorSearchView.tsx @@ -1,5 +1,5 @@ import { NavigatorSearchResultSet } from '@nitrots/nitro-renderer'; -import { FC, KeyboardEvent, useEffect, useState } from 'react'; +import { FC, useEffect, useRef, useState } from 'react'; import { FaSearch } from 'react-icons/fa'; import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api'; import { Button } from '../../../../common'; @@ -16,6 +16,7 @@ export const NavigatorSearchView: FC = props => const { searchResult } = props; const [ searchFilterIndex, setSearchFilterIndex ] = useState(0); const [ inputText, setInputText ] = useState(''); + const formRef = useRef(null); const { topLevelContext } = useNavigatorData(); // Sync the input text display when a server result arrives (e.g. on tab switch @@ -61,31 +62,27 @@ export const NavigatorSearchView: FC = props => return () => clearTimeout(timer); }, [ inputText, searchFilterIndex ]); - const processSearch = () => + // React 19 form action — fires on Enter or the submit button, skipping the + // debounce timer for an immediate search. + const submitSearch = (formData: FormData) => { if(!topLevelContext) return; - // Immediate submit — skip the debounce timer + const raw = formData.get('q'); + const value = (typeof raw === 'string') ? raw : inputText; const searchFilter = SearchFilterOptions[searchFilterIndex] ?? SearchFilterOptions[0]; - const searchQuery = (searchFilter.query ? (searchFilter.query + ':') : '') + inputText; + const searchQuery = (searchFilter.query ? (searchFilter.query + ':') : '') + value; useNavigatorUiStore.getState().setFilter(searchQuery); }; - const handleKeyDown = (event: KeyboardEvent) => - { - if(event.key !== 'Enter') return; - - processSearch(); - }; - return (
-
- setInputText(event.target.value) } onKeyDown={ event => handleKeyDown(event) } /> - -
+
); };