From 686156ad6e44c17609e7903f7d99e12c8a940af6 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Sat, 5 Oct 2024 22:14:23 +0530
Subject: Add autofocus when clear button is clicked + ui changes

---
 src/screens/AppList.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

(limited to 'src/screens/AppList.tsx')

diff --git a/src/screens/AppList.tsx b/src/screens/AppList.tsx
index 4ef5ec3..5af2c55 100644
--- a/src/screens/AppList.tsx
+++ b/src/screens/AppList.tsx
@@ -17,7 +17,7 @@ const AppListItem: React.FC<{app: AppDetail}> = React.memo(({app}) => {
   return (
     <AppMenu app={app}>
       <View className="p-2">
-        <Text className="text-md font-bold">{app.label}</Text>
+        <Text className="text-base">{app.label}</Text>
         <Text className="text-xs text-gray-600">{app.packageName}</Text>
       </View>
     </AppMenu>
@@ -29,7 +29,11 @@ export const AppList: React.FC<{active: boolean}> = React.memo(({active}) => {
   const textInputRef = useRef<TextInput>(null);
   const [searchText, setSearchText] = useState('');
 
-  const clearSearchInput = useStableCallback(() => setSearchText(''));
+  const clearSearchInput = useStableCallback(() => {
+    setSearchText('');
+    if (active)
+      TextInput.State.focusTextInput(textInputRef.current ?? undefined);
+  });
 
   const filteredApps = useMemo(() => {
     if (searchText === '') return apps;
@@ -45,8 +49,8 @@ export const AppList: React.FC<{active: boolean}> = React.memo(({active}) => {
 
   return (
     <View className="px-2">
-      <View className="flex justify-between flex-row items-center gap-2 px-2">
-        <Icon name="search" size={21} color="#555" className="py-2" />
+      <View className="flex justify-between flex-row items-center gap-2 px-2 border-b border-slate-800">
+        <Icon name="search" size={21} color="#666" className="py-2" />
         <TextInput
           ref={textInputRef}
           autoFocus={false}
@@ -59,11 +63,15 @@ export const AppList: React.FC<{active: boolean}> = React.memo(({active}) => {
           underlayColor="#222"
           onPress={clearSearchInput}
           className="p-2">
-          <Icon name="close" size={21} color="#aaa" />
+          <Icon name="close" size={17} color="#666" />
         </TouchableHighlight>
       </View>
 
-      <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        keyboardShouldPersistTaps="always"
+        keyboardDismissMode="on-drag"
+        className="pt-2">
         <View className="flex-1">
           {filteredApps.map((app, index) => (
             <AppListItem app={app} key={app.packageName + index} />
-- 
cgit v1.3.1