From 9f8248a85726a62fc2e154fb1619af4d43e0e1d0 Mon Sep 17 00:00:00 2001
From: Tsaqif <tsaiinkwa@yahoo.com>
Date: Wed, 8 Nov 2023 10:38:35 +0700
Subject: [PATCH] Fix android keyboard doesn't show up and ios text input
 content doesn't scroll to bottom when edit message

Signed-off-by: Tsaqif <tsaiinkwa@yahoo.com>
---
 .../{index.native.ts => index.android.ts}            | 12 ++++++++++--
 src/pages/home/report/ReportActionItemMessageEdit.js | 12 +++---------
 2 files changed, 13 insertions(+), 11 deletions(-)
 rename src/libs/focusTextInputAfterAnimation/{index.native.ts => index.android.ts} (55%)

diff --git a/src/libs/focusTextInputAfterAnimation/index.native.ts b/src/libs/focusTextInputAfterAnimation/index.android.ts
similarity index 55%
rename from src/libs/focusTextInputAfterAnimation/index.native.ts
rename to src/libs/focusTextInputAfterAnimation/index.android.ts
index 2ccbfe7368b2..5de1f1f4696b 100644
--- a/src/libs/focusTextInputAfterAnimation/index.native.ts
+++ b/src/libs/focusTextInputAfterAnimation/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
index db453ca38265..60714dad9864 100644
--- 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 () => {