From c3d3f91349de5e3b63e5f05c4fbb2346fadebad7 Mon Sep 17 00:00:00 2001
From: Mary <pineapplecreamcheese@skiff.com>
Date: Thu, 1 Feb 2024 06:55:52 +0700
Subject: [PATCH 1/3] fix: submit app password on enter

---
 src/view/com/modals/AddAppPasswords.tsx | 28 +++++++++++++++++--------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx
index 5048a004..040d294b 100644
--- a/src/view/com/modals/AddAppPasswords.tsx
+++ b/src/view/com/modals/AddAppPasswords.tsx
@@ -62,7 +62,8 @@ export function Component({}: {}) {
   const {_} = useLingui()
   const {closeModal} = useModalControls()
   const {data: passwords} = useAppPasswordsQuery()
-  const createMutation = useAppPasswordCreateMutation()
+  const {mutateAsync: mutateAppPassword, isPending} =
+    useAppPasswordCreateMutation()
   const [name, setName] = useState(
     shadesOfBlue[Math.floor(Math.random() * shadesOfBlue.length)],
   )
@@ -107,7 +108,7 @@ export function Component({}: {}) {
     }
 
     try {
-      const newPassword = await createMutation.mutateAsync({name})
+      const newPassword = await mutateAppPassword({name})
       if (newPassword) {
         setAppPassword(newPassword.password)
       } else {
@@ -136,6 +137,17 @@ export function Component({}: {}) {
     }
   }
 
+  const textInputRef = React.useCallback((node: TextInput | null) => {
+    if (!node) {
+      return
+    }
+
+    // `selectTextOnFocus` isn't working with `autoFocus={true}` or without a timeout going.
+    setTimeout(() => {
+      node.focus()
+    }, 0)
+  }, [])
+
   return (
     <View style={[styles.container, pal.view]} testID="addAppPasswordsModal">
       <View>
@@ -145,6 +157,7 @@ export function Component({}: {}) {
               Please enter a unique name for this App Password or use our
               randomly generated one.
             </Trans>
+            asdq42
           </Text>
         ) : (
           <Text type="lg" style={[pal.text]}>
@@ -159,6 +172,7 @@ export function Component({}: {}) {
         {!appPassword ? (
           <View style={[pal.btn, styles.textInputWrapper]}>
             <TextInput
+              ref={textInputRef}
               style={[styles.input, pal.text]}
               onChangeText={_onChangeText}
               value={name}
@@ -167,16 +181,12 @@ export function Component({}: {}) {
               autoCorrect={false}
               autoComplete="off"
               autoCapitalize="none"
-              autoFocus={true}
               maxLength={32}
               selectTextOnFocus={true}
-              multiline={true} // need this to be true otherwise selectTextOnFocus doesn't work
-              numberOfLines={1} // hack for multiline so only one line shows (android)
-              scrollEnabled={false} // hack for multiline so only one line shows (ios)
-              blurOnSubmit={true} // hack for multiline so it submits
-              editable={!appPassword}
+              blurOnSubmit={true}
+              editable={!isPending}
               returnKeyType="done"
-              onEndEditing={createAppPassword}
+              onSubmitEditing={createAppPassword}
               accessible={true}
               accessibilityLabel={_(msg`Name`)}
               accessibilityHint={_(msg`Input name for app password`)}

From ed8055127819d1918b9c8b296612983a3681157a Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 6 Feb 2024 12:07:06 -0800
Subject: [PATCH 2/3] Cat on keyboard

---
 src/view/com/modals/AddAppPasswords.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx
index 040d294b..4508e685 100644
--- a/src/view/com/modals/AddAppPasswords.tsx
+++ b/src/view/com/modals/AddAppPasswords.tsx
@@ -157,7 +157,6 @@ export function Component({}: {}) {
               Please enter a unique name for this App Password or use our
               randomly generated one.
             </Trans>
-            asdq42
           </Text>
         ) : (
           <Text type="lg" style={[pal.text]}>

From d38583781200437b1a01f8a016694c4a8d036aad Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 6 Feb 2024 12:13:09 -0800
Subject: [PATCH 3/3] Go back to autofocus and small ui tweak

---
 src/view/com/modals/AddAppPasswords.tsx | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx
index 4508e685..a8913dd5 100644
--- a/src/view/com/modals/AddAppPasswords.tsx
+++ b/src/view/com/modals/AddAppPasswords.tsx
@@ -137,17 +137,6 @@ export function Component({}: {}) {
     }
   }
 
-  const textInputRef = React.useCallback((node: TextInput | null) => {
-    if (!node) {
-      return
-    }
-
-    // `selectTextOnFocus` isn't working with `autoFocus={true}` or without a timeout going.
-    setTimeout(() => {
-      node.focus()
-    }, 0)
-  }, [])
-
   return (
     <View style={[styles.container, pal.view]} testID="addAppPasswordsModal">
       <View>
@@ -171,7 +160,6 @@ export function Component({}: {}) {
         {!appPassword ? (
           <View style={[pal.btn, styles.textInputWrapper]}>
             <TextInput
-              ref={textInputRef}
               style={[styles.input, pal.text]}
               onChangeText={_onChangeText}
               value={name}
@@ -180,6 +168,7 @@ export function Component({}: {}) {
               autoCorrect={false}
               autoComplete="off"
               autoCapitalize="none"
+              autoFocus={true}
               maxLength={32}
               selectTextOnFocus={true}
               blurOnSubmit={true}
@@ -262,7 +251,6 @@ const styles = StyleSheet.create({
     width: '100%',
     paddingVertical: 10,
     paddingHorizontal: 8,
-    marginTop: 6,
     fontSize: 17,
     letterSpacing: 0.25,
     fontWeight: '400',