Fix - After adding the emoji, the cursor starts overlapping with the message text

Author: dmkt9

src/components/Modal/ReanimatedModal/index.tsx

@@ -138,7 +138,13 @@ function ReanimatedModal({
         if (handleRef.current) {
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
-    }, []);
+        // Because on Android, the Modal's onDismiss callback does not work reliably. There's a reported issue at:
+        // https://stackoverflow.com/questions/58937956/react-native-modal-ondismiss-not-invoked
+        // Therefore, we manually call onModalHide() here for Android.
+        if (getPlatform() === CONST.PLATFORM.ANDROID) {
+            onModalHide();
+        }
+    }, [onModalHide]);
 
     const containerView = (
         <Container
@@ -197,7 +203,9 @@ function ReanimatedModal({
                 testID={testID}
                 onDismiss={() => {
                     onDismiss?.();
-                    onModalHide();
+                    if (getPlatform() !== CONST.PLATFORM.ANDROID) {
+                        onModalHide();
+                    }
                 }}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}

src/pages/settings/Profile/CustomStatus/StatusPage.tsx

@@ -22,8 +22,10 @@ import usePermissions from '@hooks/usePermissions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {isMobileChrome} from '@libs/Browser';
 import DateUtils from '@libs/DateUtils';
 import focusAfterModalClose from '@libs/focusAfterModalClose';
+import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import {formatPhoneNumber} from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
@@ -213,7 +215,15 @@ function StatusPage() {
                             role={CONST.ROLE.PRESENTATION}
                             defaultValue={defaultEmoji}
                             style={styles.mb3}
-                            onModalHide={() => focusAfterModalClose(inputRef.current)}
+                            onModalHide={() => {
+                                // On mobile Chrome, the input will blur immediately upon focus if the focus function is called right after the modal closes, even though the modal has fully closed.
+                                // Therefore, use the `focusComposerWithDelay` helper as used in `ComposerWithSuggestions` for this case.
+                                if (isMobileChrome()) {
+                                    focusComposerWithDelay(inputRef.current)(true);
+                                } else {
+                                    focusAfterModalClose(inputRef.current);
+                                }
+                            }}
                             // eslint-disable-next-line @typescript-eslint/no-unused-vars
                             onInputChange={(emoji: string): void => {}}
                         />