diff --git a/src/features/gifPicker/GifPickerDialog.tsx b/src/features/gifPicker/GifPickerDialog.tsx index 3e7f18dde7..4523231303 100644 --- a/src/features/gifPicker/GifPickerDialog.tsx +++ b/src/features/gifPicker/GifPickerDialog.tsx @@ -10,6 +10,7 @@ import {GifPickerErrorBoundary} from '#/features/gifPicker/components/GifPickerE import {GifPickerGrid} from '#/features/gifPicker/components/GifPickerGrid' import {GifPickerHeader} from '#/features/gifPicker/components/GifPickerHeader' import {GifPickerPlaceholder} from '#/features/gifPicker/components/GifPickerPlaceholder' +import {useGifAutocomplete} from '#/features/gifPicker/hooks/useGifAutocomplete' import {useGifPickerData} from '#/features/gifPicker/hooks/useGifPickerData' import {type Gif} from '#/features/gifPicker/types' @@ -66,6 +67,15 @@ function GifPickerBody({ const [rawSearch, setRawSearch] = useState('') const search = useThrottledValue(rawSearch, 500) + const autocomplete = useGifAutocomplete({ + onSelectSuggestion: text => { + setRawSearch(text) + // Set the TextInput's displayed value to match + textInputRef.current?.setNativeProps({text}) + listRef.current?.scrollToOffset({offset: 0, animated: false}) + }, + }) + const { data, fetchNextPage, @@ -97,6 +107,7 @@ function GifPickerBody({ const onChangeSearch = (text: string) => { setRawSearch(text) + autocomplete.handleTextChange(text) listRef.current?.scrollToOffset({offset: 0, animated: false}) } @@ -107,6 +118,7 @@ function GifPickerBody({ onChangeText={onChangeSearch} onClose={() => control.close()} onEscape={() => control.close()} + autocomplete={autocomplete} /> {!hasData && (