Merge pull request Expensify#61691 from bernhardoj/fix/61328-keyboard-doesnt-show-after-refocus

Fix keyboard doesn't show when input is refocused after status emoji picker is closed

Author: yuwenmemon

src/libs/focusAfterModalClose.ts

@@ -0,0 +1,15 @@
+import type {TextInput} from 'react-native';
+import ComposerFocusManager from './ComposerFocusManager';
+import isWindowReadyToFocus from './isWindowReadyToFocus';
+
+function focusAfterModalClose(textInput: TextInput | null) {
+    if (!textInput) {
+        return;
+    }
+
+    Promise.all([ComposerFocusManager.isReadyToFocus(), isWindowReadyToFocus()]).then(() => {
+        textInput?.focus();
+    });
+}
+
+export default focusAfterModalClose;

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

@@ -21,6 +21,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
+import focusAfterModalClose from '@libs/focusAfterModalClose';
 import Navigation from '@libs/Navigation/Navigation';
 import {clearCustomStatus, clearDraftCustomStatus, updateCustomStatus, updateDraftCustomStatus} from '@userActions/User';
 import CONST from '@src/CONST';
@@ -36,7 +37,7 @@ function StatusPage() {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const [draftStatus] = useOnyx(ONYXKEYS.CUSTOM_STATUS_DRAFT);
+    const [draftStatus] = useOnyx(ONYXKEYS.CUSTOM_STATUS_DRAFT, {canBeMissing: true});
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const formRef = useRef<FormRef>(null);
     const [brickRoadIndicator, setBrickRoadIndicator] = useState<ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>>();
@@ -197,9 +198,7 @@ function StatusPage() {
                             role={CONST.ROLE.PRESENTATION}
                             defaultValue={defaultEmoji}
                             style={styles.mb3}
-                            onModalHide={() => {
-                                inputRef.current?.focus();
-                            }}
+                            onModalHide={() => focusAfterModalClose(inputRef.current)}
                             // eslint-disable-next-line @typescript-eslint/no-unused-vars
                             onInputChange={(emoji: string): void => {}}
                         />