From 3a0ba27a679a865c56bbc3a738dccf147ff398b6 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 22 Apr 2024 13:56:03 +0100
Subject: [PATCH 1/3] scroll list to top on query change

---
 src/components/Dialog/index.web.tsx  | 12 ++++++------
 src/components/dialogs/GifSelect.tsx | 15 +++++++++++----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index a086955db6..4cb4e7570c 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<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
index baff31168b..31e8f84a13 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 React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {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'
 
@@ -75,12 +76,17 @@ 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)
 
   const isSearching = search.length > 0
 
+  useEffect(() => {
+    listRef.current?.scrollToOffset({offset: 0, animated: false})
+  }, [search])
+
   const trendingQuery = useGiphyTrending()
   const searchQuery = useGifphySearch(search)
 
@@ -126,7 +132,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()
@@ -176,7 +182,7 @@ function GifList({
             onChangeText={setSearch}
             returnKeyType="search"
             clearButtonMode="while-editing"
-            inputRef={ref}
+            inputRef={textInputRef}
             maxLength={50}
             onKeyPress={({nativeEvent}) => {
               if (nativeEvent.key === 'Escape') {
@@ -193,6 +199,7 @@ function GifList({
     <>
       {gtMobile && <Dialog.Close />}
       <Dialog.InnerFlatList
+        ref={listRef}
         key={gtMobile ? '3 cols' : '2 cols'}
         data={flattenedData}
         renderItem={renderItem}

From da14bb3a04bd99840a0c74b75c724800e55b82f1 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 22 Apr 2024 13:56:25 +0100
Subject: [PATCH 2/3] dismiss keyboard on swipe list

---
 src/components/dialogs/GifSelect.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 31e8f84a13..ce67f26dcd 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useEffect, 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'
@@ -235,6 +235,7 @@ function GifList({
         keyExtractor={(item: Gif) => item.id}
         // @ts-expect-error web only
         style={isWeb && {minHeight: '100vh'}}
+        onScrollBeginDrag={() => Keyboard.dismiss()}
         ListFooterComponent={
           hasData ? (
             <ListFooter

From 0963a7e4bf434664bd46cc78b2db5f302b62b9d6 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 22 Apr 2024 16:10:51 +0100
Subject: [PATCH 3/3] don't need an effect

---
 src/components/dialogs/GifSelect.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index ce67f26dcd..0365c7c330 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {useCallback, useMemo, useRef, useState} from 'react'
 import {Keyboard, TextInput, View} from 'react-native'
 import {Image} from 'expo-image'
 import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
@@ -83,10 +83,6 @@ function GifList({
 
   const isSearching = search.length > 0
 
-  useEffect(() => {
-    listRef.current?.scrollToOffset({offset: 0, animated: false})
-  }, [search])
-
   const trendingQuery = useGiphyTrending()
   const searchQuery = useGifphySearch(search)
 
@@ -179,7 +175,10 @@ 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={textInputRef}