[GIFs] Reset scroll on query change (#3642)

* scroll list to top on query change * dismiss keyboard on swipe list * don't need an effect
bluesky-social · Apr 22, 2024 · f49d73d · f49d73d
1 parent 0b3cc59
commit f49d73d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git 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<any> & {label: string}) {
+export const InnerFlatList = React.forwardRef<
+  FlatList,
+  FlatListProps<any> & {label: string}
+>(function InnerFlatList({label, style, ...props}, ref) {
   const {gtMobile} = useBreakpoints()
   return (
     <Inner
@@ -213,12 +212,13 @@ export function InnerFlatList({
         overflow: 'hidden',
       }}>
       <FlatList
+        ref={ref}
         style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
         {...props}
       />
     </Inner>
   )
-}
+})
 
 export function Handle() {
   return null

diff --git 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<TextInput>(null)
+  const textInputRef = useRef<TextInput>(null)
+  const listRef = useRef<BottomSheetFlatListMethods>(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({
           <TextField.Input
             label={_(msg`Search GIFs`)}
             placeholder={_(msg`Powered by GIPHY`)}
-            onChangeText={setSearch}
+            onChangeText={text => {
+              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 && <Dialog.Close />}
       <Dialog.InnerFlatList
+        ref={listRef}
         key={gtMobile ? '3 cols' : '2 cols'}
         data={flattenedData}
         renderItem={renderItem}
@@ -235,6 +241,7 @@ function GifList({
         keyExtractor={(item: Gif) => item.id}
         // @ts-expect-error web only
         style={isWeb && {minHeight: '100vh'}}
+        onScrollBeginDrag={() => Keyboard.dismiss()}
         ListFooterComponent={
           hasData ? (
             <ListFooter