Merge pull request #31041 from tsa321/andios-compscroll

Fix android keyboard doesn't show up and ios text input content doesn't scroll to bottom when edit message
Expensify · Nov 9, 2023 · de53c0c · de53c0c
2 parents ea5cef5 + 9f8248a
commit de53c0c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/...usTextInputAfterAnimation/index.native.ts → ...sTextInputAfterAnimation/index.android.ts b/...usTextInputAfterAnimation/index.native.ts → ...sTextInputAfterAnimation/index.android.ts
@@ -1,10 +1,18 @@
 import FocusTextInputAfterAnimation from './types';
 
 /**
- * Focus the text input with a slight delay to make sure modals are closed first.
+ * Initially this file is intended for native ios but use index.native.js filename and affects android.
+ *
+ * Initial comment for this file is:
+ * "Focus the text input with a slight delay to make sure modals are closed first.
  * Since in react-native-modal `onModalHide` is called before the modal is actually hidden.
  * It results in the keyboard being dismissed right away on both iOS and Android.
- * See this discussion for more details: https://github.com/Expensify/App/issues/18300
+ * See this discussion for more details: https://github.com/Expensify/App/issues/18300"
+ *
+ * But the bug already fixed, without using setTimeout for IOS the focus seems to work properly.
+ * Instead there is new IOS bug of text input content doesn't scroll to bottom if using setTimeout,
+ * also there is an android keyboard doesn't show up bug when text input is focused and
+ * the use of setTimeout will make the keyboard show up properly.
  *
  * @param animationLength you must use your best guess as to what a good animationLength is. It can't be too short, or the animation won't be finished. It can't be too long or
  *      the user will notice that it feels sluggish

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -169,15 +169,6 @@ function ReportActionItemMessageEdit(props) {
         [props.action.reportActionID],
     );
 
-    // Scroll content of textInputRef to bottom
-    useEffect(() => {
-        if (!textInputRef.current) {
-            return;
-        }
-        textInputRef.current.focus();
-        textInputRef.current.scrollTop = textInputRef.current.scrollHeight;
-    }, []);
-
     useEffect(() => {
         // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
         // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
@@ -190,6 +181,9 @@ function ReportActionItemMessageEdit(props) {
                 });
                 return prevDraft;
             });
+
+            // Scroll content of textInputRef to bottom
+            textInputRef.current.scrollTop = textInputRef.current.scrollHeight;
         }
 
         return () => {