diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx index a086955d..4cb4e757 100644 --- a/src/components/Dialog/index.web.tsx +++ b/src/components/Dialog/index.web.tsx @@ -197,11 +197,10 @@ export function Inner({ export const ScrollableInner = Inner -export function InnerFlatList({ - label, - style, - ...props -}: FlatListProps & {label: string}) { +export const InnerFlatList = React.forwardRef< + FlatList, + FlatListProps & {label: string} +>(function InnerFlatList({label, style, ...props}, ref) { const {gtMobile} = useBreakpoints() return ( ) -} +}) export function Handle() { return null diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx index ad4fbead..a8fe016d 100644 --- a/src/components/dialogs/GifSelect.tsx +++ b/src/components/dialogs/GifSelect.tsx @@ -1,6 +1,7 @@ import React, {useCallback, useMemo, useRef, useState} from 'react' -import {TextInput, View} from 'react-native' +import {Keyboard, TextInput, View} from 'react-native' import {Image} from 'expo-image' +import {BottomSheetFlatListMethods} from '@discord/bottom-sheet' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -82,7 +83,8 @@ function GifList({ const {_} = useLingui() const t = useTheme() const {gtMobile} = useBreakpoints() - const ref = useRef(null) + const textInputRef = useRef(null) + const listRef = useRef(null) const [undeferredSearch, setSearch] = useState('') const search = useThrottledValue(undeferredSearch, 500) @@ -133,7 +135,7 @@ function GifList({ const onGoBack = useCallback(() => { if (isSearching) { // clear the input and reset the state - ref.current?.clear() + textInputRef.current?.clear() setSearch('') } else { control.close() @@ -180,10 +182,13 @@ function GifList({ { + setSearch(text) + listRef.current?.scrollToOffset({offset: 0, animated: false}) + }} returnKeyType="search" clearButtonMode="while-editing" - inputRef={ref} + inputRef={textInputRef} maxLength={50} onKeyPress={({nativeEvent}) => { if (nativeEvent.key === 'Escape') { @@ -200,6 +205,7 @@ function GifList({ <> {gtMobile && } item.id} // @ts-expect-error web only style={isWeb && {minHeight: '100vh'}} + onScrollBeginDrag={() => Keyboard.dismiss()} ListFooterComponent={ hasData ? (