From f0532865ce1d5decc39cca6eeeea0d61ebd8d63d Mon Sep 17 00:00:00 2001
From: Hailey <153161762+haileyok@users.noreply.github.com>
Date: Thu, 28 Dec 2023 12:58:28 -0800
Subject: [PATCH] minor search screen ux improvements (#2264)

* handle taps while keyboard is displayed

* dismiss keyboard on drag when searching feeds

* dismiss on drag and persist taps on suggested follows

* add hitslop to clear button

* add hitslop to cancel button

* dismiss keyboard on drag when searching users

* hit slop for feed search clear button

* move import
---
 src/view/com/util/forms/SearchInput.tsx |  4 +++-
 src/view/screens/Feeds.tsx              |  2 ++
 src/view/screens/Search/Search.tsx      | 15 ++++++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/view/com/util/forms/SearchInput.tsx b/src/view/com/util/forms/SearchInput.tsx
index 02b462b5..a88046d4 100644
--- a/src/view/com/util/forms/SearchInput.tsx
+++ b/src/view/com/util/forms/SearchInput.tsx
@@ -11,6 +11,7 @@ import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
+import {HITSLOP_10} from 'lib/constants'
 import {MagnifyingGlassIcon} from 'lib/icons'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -71,7 +72,8 @@ export function SearchInput({
           onPress={onPressCancelSearchInner}
           accessibilityRole="button"
           accessibilityLabel={_(msg`Clear search query`)}
-          accessibilityHint="">
+          accessibilityHint=""
+          hitSlop={HITSLOP_10}>
           <FontAwesomeIcon
             icon="xmark"
             size={16}
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
index 20cdf815..dbdb6d9c 100644
--- a/src/view/screens/Feeds.tsx
+++ b/src/view/screens/Feeds.tsx
@@ -494,6 +494,8 @@ export function FeedsScreen(_props: Props) {
         // @ts-ignore our .web version only -prf
         desktopFixedHeight
         scrollIndicatorInsets={{right: 1}}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
       />
 
       {hasSession && (
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index b522edfb..bdc324c4 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -162,6 +162,8 @@ function SearchScreenSuggestedFollows() {
       // @ts-ignore web only -prf
       desktopFixedHeight
       contentContainerStyle={{paddingBottom: 1200}}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="on-drag"
     />
   ) : (
     <CenteredView sideBorders style={[pal.border, s.hContentRegion]}>
@@ -572,7 +574,8 @@ export function SearchScreenMobile(
               onPress={onPressClearQuery}
               accessibilityRole="button"
               accessibilityLabel={_(msg`Clear search query`)}
-              accessibilityHint="">
+              accessibilityHint=""
+              hitSlop={HITSLOP_10}>
               <FontAwesomeIcon
                 icon="xmark"
                 size={16}
@@ -584,7 +587,10 @@ export function SearchScreenMobile(
 
         {query || inputIsFocused ? (
           <View style={styles.headerCancelBtn}>
-            <Pressable onPress={onPressCancelSearch} accessibilityRole="button">
+            <Pressable
+              onPress={onPressCancelSearch}
+              accessibilityRole="button"
+              hitSlop={HITSLOP_10}>
               <Text style={[pal.text]}>
                 <Trans>Cancel</Trans>
               </Text>
@@ -598,7 +604,10 @@ export function SearchScreenMobile(
           {isFetching ? (
             <Loader />
           ) : (
-            <ScrollView style={{height: '100%'}}>
+            <ScrollView
+              style={{height: '100%'}}
+              keyboardShouldPersistTaps="handled"
+              keyboardDismissMode="on-drag">
               {searchResults.length ? (
                 searchResults.map((item, i) => (
                   <SearchResultCard