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 () => {