Fix back navigation focus in task creation

src/components/FormAlertWithSubmitButton.tsx

@@ -1,3 +1,4 @@
+import type {Ref} from 'react';
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
@@ -46,6 +47,9 @@ type FormAlertWithSubmitButtonProps = {
     /** Whether to show the alert text */
     isAlertVisible?: boolean;
 
+    /** React ref being forwarded to the submit button */
+    buttonRef?: Ref<View>;
+
     /** Text for the button */
     buttonText: string;
 
@@ -70,6 +74,7 @@ function FormAlertWithSubmitButton({
     disablePressOnEnter = false,
     isSubmitActionDangerous = false,
     footerContent,
+    buttonRef,
     buttonStyles,
     buttonText,
     isAlertVisible = false,
@@ -105,6 +110,7 @@ function FormAlertWithSubmitButton({
                         />
                     ) : (
                         <Button
+                            ref={buttonRef}
                             success
                             pressOnEnter={!disablePressOnEnter}
                             enterKeyEventListenerPriority={enterKeyEventListenerPriority}

src/pages/tasks/NewTaskPage.tsx

@@ -1,8 +1,9 @@
+import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {InteractionManager, View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -14,13 +15,15 @@ import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
+import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import type {NewTaskNavigatorParamList} from '@libs/Navigation/types';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import playSound, {SOUNDS} from '@libs/Sound';
 import * as TaskActions from '@userActions/Task';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -59,6 +62,19 @@ function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) {
 
     const {paddingBottom} = useStyledSafeAreaInsets();
 
+    const confirmButtonRef = useRef<View>(null);
+    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    useFocusEffect(
+        useCallback(() => {
+            focusTimeoutRef.current = setTimeout(() => {
+                InteractionManager.runAfterInteractions(() => {
+                    blurActiveElement();
+                });
+            }, CONST.ANIMATED_TRANSITION);
+            return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current);
+        }, []),
+    );
+
     useEffect(() => {
         setErrorMessage('');
 
@@ -205,6 +221,7 @@ function NewTaskPage({task, reports, personalDetails}: NewTaskPageProps) {
                             message={errorMessage}
                             onSubmit={onSubmit}
                             enabledWhenOffline
+                            buttonRef={confirmButtonRef}
                             buttonText={translate('newTaskPage.confirmTask')}
                             containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5, !paddingBottom ? styles.mb5 : null]}
                         />