prevent initial focus trap while has a focused element.

patches/focus-trap+7.5.4.patch

@@ -0,0 +1,88 @@
+diff --git a/node_modules/focus-trap/dist/focus-trap.esm.js b/node_modules/focus-trap/dist/focus-trap.esm.js
+index 10d56db..a0ed057 100644
+--- a/node_modules/focus-trap/dist/focus-trap.esm.js
++++ b/node_modules/focus-trap/dist/focus-trap.esm.js
+@@ -100,8 +100,8 @@ var isKeyForward = function isKeyForward(e) {
+ var isKeyBackward = function isKeyBackward(e) {
+   return isTabEvent(e) && e.shiftKey;
+ };
+-var delay = function delay(fn) {
+-  return setTimeout(fn, 0);
++var delay = function delay(fn, delayTime = 0) {
++  return setTimeout(fn, delayTime);
+ };
+
+ // Array.find/findIndex() are not supported on IE; this replicates enough
+@@ -283,7 +283,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
+     return node;
+   };
+   var getInitialFocusNode = function getInitialFocusNode() {
+-    var node = getNodeForOption('initialFocus');
++    var node = getNodeForOption('initialFocus', state.containers);
+
+     // false explicitly indicates we want no initialFocus at all
+     if (node === false) {
+@@ -744,7 +744,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
+     // that caused the focus trap activation.
+     state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
+       tryFocus(getInitialFocusNode());
+-    }) : tryFocus(getInitialFocusNode());
++    }, typeof config.delayInitialFocus === 'number' ? config.delayInitialFocus : undefined) : tryFocus(getInitialFocusNode());
+     doc.addEventListener('focusin', checkFocusIn, true);
+     doc.addEventListener('mousedown', checkPointerDown, {
+       capture: true,
+diff --git a/node_modules/focus-trap/index.d.ts b/node_modules/focus-trap/index.d.ts
+index 400db1b..69f4b94 100644
+--- a/node_modules/focus-trap/index.d.ts
++++ b/node_modules/focus-trap/index.d.ts
+@@ -16,7 +16,7 @@ declare module 'focus-trap' {
+    * `document.querySelector()` to find the DOM node), `false` to explicitly indicate
+    * an opt-out, or a function that returns a DOM node or `false`.
+    */
+-  export type FocusTargetOrFalse = FocusTargetValueOrFalse | (() => FocusTargetValueOrFalse);
++  export type FocusTargetOrFalse = FocusTargetValueOrFalse | ((containers?: HTMLElement[]) => FocusTargetValueOrFalse | undefined);
+
+   type MouseEventToBoolean = (event: MouseEvent | TouchEvent) => boolean;
+   type KeyboardEventToBoolean = (event: KeyboardEvent) => boolean;
+@@ -185,7 +185,7 @@ declare module 'focus-trap' {
+      * This prevents elements within the focusable element from capturing
+      * the event that triggered the focus trap activation.
+      */
+-    delayInitialFocus?: boolean;
++    delayInitialFocus?: boolean | number;
+     /**
+      * Default: `window.document`. Document where the focus trap will be active.
+      * This allows to use FocusTrap in an iFrame context.
+diff --git a/node_modules/focus-trap/index.js b/node_modules/focus-trap/index.js
+index de8e46a..7ab9d89 100644
+--- a/node_modules/focus-trap/index.js
++++ b/node_modules/focus-trap/index.js
+@@ -63,8 +63,8 @@ const isKeyBackward = function (e) {
+   return isTabEvent(e) && e.shiftKey;
+ };
+
+-const delay = function (fn) {
+-  return setTimeout(fn, 0);
++const delay = function (fn, delayTime = 0) {
++  return setTimeout(fn, delayTime);
+ };
+
+ // Array.find/findIndex() are not supported on IE; this replicates enough
+@@ -267,7 +267,7 @@ const createFocusTrap = function (elements, userOptions) {
+   };
+
+   const getInitialFocusNode = function () {
+-    let node = getNodeForOption('initialFocus');
++    let node = getNodeForOption('initialFocus', state.containers);
+
+     // false explicitly indicates we want no initialFocus at all
+     if (node === false) {
+@@ -817,7 +817,7 @@ const createFocusTrap = function (elements, userOptions) {
+     state.delayInitialFocusTimer = config.delayInitialFocus
+       ? delay(function () {
+           tryFocus(getInitialFocusNode());
+-        })
++        }, typeof config.delayInitialFocus === 'number' ? config.delayInitialFocus : undefined)
+       : tryFocus(getInitialFocusNode());
+
+     doc.addEventListener('focusin', checkFocusIn, true);

src/components/FocusTrap/FocusTrapForScreen/FocusTrapProps.ts

@@ -1,5 +1,6 @@
 type FocusTrapForScreenProps = {
     children: React.ReactNode;
+    testID?: string;
 };
 
 export default FocusTrapForScreenProps;

src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

@@ -1,23 +1,18 @@
-import {useFocusEffect, useIsFocused, useRoute} from '@react-navigation/native';
+import {useIsFocused, useRoute} from '@react-navigation/native';
 import FocusTrap from 'focus-trap-react';
-import React, {useCallback, useMemo} from 'react';
-import {useOnyx} from 'react-native-onyx';
+import React, {useMemo} from 'react';
 import BOTTOM_TAB_SCREENS from '@components/FocusTrap/BOTTOM_TAB_SCREENS';
-import getScreenWithAutofocus from '@components/FocusTrap/SCREENS_WITH_AUTOFOCUS';
 import sharedTrapStack from '@components/FocusTrap/sharedTrapStack';
 import TOP_TAB_SCREENS from '@components/FocusTrap/TOP_TAB_SCREENS';
 import WIDE_LAYOUT_INACTIVE_SCREENS from '@components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import ONYXKEYS from '@src/ONYXKEYS';
+import CONST from '@src/CONST';
 import type FocusTrapProps from './FocusTrapProps';
 
-let activeRouteName = '';
 function FocusTrapForScreen({children}: FocusTrapProps) {
     const isFocused = useIsFocused();
     const route = useRoute();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const [isAuthenticated] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => !!session?.authToken});
-    const screensWithAutofocus = useMemo(() => getScreenWithAutofocus(!!isAuthenticated), [isAuthenticated]);
 
     const isActive = useMemo(() => {
         // Focus trap can't be active on bottom tab screens because it would block access to the tab bar.
@@ -37,12 +32,6 @@ function FocusTrapForScreen({children}: FocusTrapProps) {
         return true;
     }, [isFocused, isSmallScreenWidth, route.name]);
 
-    useFocusEffect(
-        useCallback(() => {
-            activeRouteName = route.name;
-        }, [route]),
-    );
-
     return (
         <FocusTrap
             active={isActive}
@@ -51,18 +40,12 @@ function FocusTrapForScreen({children}: FocusTrapProps) {
                 trapStack: sharedTrapStack,
                 allowOutsideClick: true,
                 fallbackFocus: document.body,
-                // We don't want to ovverride autofocus on these screens.
-                initialFocus: () => {
-                    if (screensWithAutofocus.includes(activeRouteName)) {
-                        return false;
-                    }
-                    return undefined;
-                },
-                setReturnFocus: (element) => {
-                    if (screensWithAutofocus.includes(activeRouteName)) {
+                delayInitialFocus: CONST.ANIMATED_TRANSITION + CONST.ANIMATION_IN_TIMING,
+                initialFocus: (focusTrapContainers) => {
+                    const hasFocusedElementInsideContainer = focusTrapContainers?.some((container) => container.contains(document.activeElement));
+                    if (hasFocusedElementInsideContainer) {
                         return false;
                     }
-                    return element;
                 },
             }}
         >

src/components/MoneyRequestConfirmationList.tsx

@@ -1,6 +1,6 @@
 import {useIsFocused} from '@react-navigation/native';
 import lodashIsEqual from 'lodash/isEqual';
-import React, {memo, useCallback, useEffect, useMemo, useState} from 'react';
+import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {TextStyle} from 'react-native';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -726,6 +726,12 @@ function MoneyRequestConfirmationList({
         ],
     );
 
+    const confirmButtonRef = useRef<View>(null);
+
+    useEffect(() => {
+        confirmButtonRef.current?.focus();
+    }, []);
+
     const footerContent = useMemo(() => {
         if (isReadOnly) {
             return;
@@ -757,6 +763,7 @@ function MoneyRequestConfirmationList({
             />
         ) : (
             <ButtonWithDropdownMenu
+                buttonRef={confirmButtonRef}
                 success
                 pressOnEnter
                 isDisabled={shouldDisableButton}

src/components/ScreenWrapper.tsx

@@ -242,7 +242,7 @@ function ScreenWrapper(
                 }
 
                 return (
-                    <FocusTrapForScreens>
+                    <FocusTrapForScreens testID={testID}>
                         <View
                             ref={ref}
                             style={[styles.flex1, {minHeight}]}