diff --git a/app/assets/javascripts/components/AutocompleteTagHint.tsx b/app/assets/javascripts/components/AutocompleteTagHint.tsx index 84c172196..d4bfd6c6c 100644 --- a/app/assets/javascripts/components/AutocompleteTagHint.tsx +++ b/app/assets/javascripts/components/AutocompleteTagHint.tsx @@ -1,5 +1,6 @@ import { AppState } from '@/ui_models/app_state'; import { observer } from 'mobx-react-lite'; +import { useRef, useEffect } from 'preact/hooks'; import { Icon } from './Icon'; type Props = { @@ -9,6 +10,10 @@ type Props = { export const AutocompleteTagHint = observer( ({ appState, closeOnBlur }: Props) => { + const { autocompleteTagHintFocused } = appState.noteTags; + + const hintRef = useRef(); + const { autocompleteSearchQuery, autocompleteTagResults } = appState.noteTags; @@ -16,16 +21,46 @@ export const AutocompleteTagHint = observer( await appState.noteTags.createAndAddNewTag(); }; + const onFocus = () => { + appState.noteTags.setAutocompleteTagHintFocused(true); + }; + + const onBlur = (event: FocusEvent) => { + closeOnBlur(event); + appState.noteTags.setAutocompleteTagHintFocused(false); + }; + + const onKeyDown = (event: KeyboardEvent) => { + if (event.key === 'ArrowUp') { + if (autocompleteTagResults.length > 0) { + const lastTagResult = + autocompleteTagResults[autocompleteTagResults.length - 1]; + appState.noteTags.setFocusedTagResultUuid(lastTagResult.uuid); + } else { + appState.noteTags.setAutocompleteInputFocused(true); + } + } + }; + + useEffect(() => { + if (autocompleteTagHintFocused) { + hintRef.current.focus(); + } + }, [appState.noteTags, autocompleteTagHintFocused]); + return ( <> {autocompleteTagResults.length > 0 && (
)}