prevent initial focus trap while has a focused element.

patches/focus-trap+7.5.4.patch

@@ -0,0 +1,134 @@
+diff --git a/node_modules/focus-trap/dist/focus-trap.esm.js b/node_modules/focus-trap/dist/focus-trap.esm.js
+index 10d56db..60fccbe 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(() => setTimeout(fn, delayTime), 0);
+ };
+
+ // 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) {
+@@ -440,7 +440,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
+     }
+   };
+   var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {
+-    var node = getNodeForOption('setReturnFocus', previousActiveElement);
++    var node = getNodeForOption('setReturnFocus', previousActiveElement, state.containers);
+     return node ? node : node === false ? false : previousActiveElement;
+   };
+
+@@ -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,
+@@ -880,7 +880,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
+             tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+           }
+           onPostDeactivate === null || onPostDeactivate === void 0 || onPostDeactivate();
+-        });
++        }, typeof config.delayInitialFocus === 'number' ? config.delayInitialFocus : undefined);
+       };
+       if (returnFocus && checkCanReturnFocus) {
+         checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);
+diff --git a/node_modules/focus-trap/index.d.ts b/node_modules/focus-trap/index.d.ts
+index 400db1b..b49618c 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;
+@@ -147,7 +147,8 @@ declare module 'focus-trap' {
+     setReturnFocus?:
+       | FocusTargetValueOrFalse
+       | ((
+-          nodeFocusedBeforeActivation: HTMLElement | SVGElement
++          nodeFocusedBeforeActivation: HTMLElement | SVGElement,
++          containers: Array<HTMLElement>
+         ) => FocusTargetValueOrFalse);
+     /**
+      * Default: `true`. If `false` or returns `false`, the `Escape` key will not trigger
+@@ -185,7 +186,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.
+@@ -222,6 +223,8 @@ declare module 'focus-trap' {
+      * keyboard navigation within the trap, for example. Also see `isKeyForward()` option.
+      */
+     isKeyBackward?: KeyboardEventToBoolean;
++
++    testID?: string;
+   }
+
+   type ActivateOptions = Pick<Options, 'onActivate' | 'onPostActivate' | 'checkCanFocusTrap'>;
+diff --git a/node_modules/focus-trap/index.js b/node_modules/focus-trap/index.js
+index de8e46a..bfc8b63 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(() => setTimeout(fn, delayTime), 0);
+ };
+
+ // 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);
+@@ -989,7 +989,7 @@ const createFocusTrap = function (elements, userOptions) {
+             tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+           }
+           onPostDeactivate?.();
+-        });
++        }, typeof config.delayInitialFocus === 'number' ? config.delayInitialFocus : undefined);
+       };
+
+       if (returnFocus && checkCanReturnFocus) {

src/components/ButtonWithDropdownMenu/types.ts

@@ -65,7 +65,7 @@ type ButtonWithDropdownMenuProps<TValueType> = {
     anchorAlignment?: AnchorAlignment;
 
     /* ref for the button */
-    buttonRef?: RefObject<View>;
+    buttonRef?: RefObject<View> | ((ref: View) => void);
 
     /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
     enterKeyEventListenerPriority?: number;

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,13 +32,6 @@ function FocusTrapForScreen({children}: FocusTrapProps) {
         return true;
     }, [isFocused, isSmallScreenWidth, route.name]);
 
-    useFocusEffect(
-        useCallback(() => {
-            // eslint-disable-next-line react-compiler/react-compiler
-            activeRouteName = route.name;
-        }, [route]),
-    );
-
     return (
         <FocusTrap
             active={isActive}
@@ -52,15 +40,16 @@ 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)) {
+                delayInitialFocus: CONST.ANIMATED_TRANSITION + CONST.ANIMATION_IN_TIMING,
+                initialFocus: (focusTrapContainers) => {
+                    const hasFocusedElementInsideContainer = focusTrapContainers?.some((container) => container.contains(document.activeElement));
+                    if (hasFocusedElementInsideContainer) {
                         return false;
                     }
                     return undefined;
                 },
                 setReturnFocus: (element) => {
-                    if (screensWithAutofocus.includes(activeRouteName)) {
+                    if (document.activeElement && document.activeElement !== document.body) {
                         return false;
                     }
                     return element;

src/components/MoneyRequestConfirmationList.tsx

@@ -5,6 +5,7 @@ import type {TextStyle} from 'react-native';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
@@ -726,6 +727,8 @@ function MoneyRequestConfirmationList({
         ],
     );
 
+    const {inputCallbackRef} = useAutoFocusInput();
+
     const footerContent = useMemo(() => {
         if (isReadOnly) {
             return;
@@ -757,6 +760,9 @@ function MoneyRequestConfirmationList({
             />
         ) : (
             <ButtonWithDropdownMenu
+                buttonRef={(ref) => {
+                    inputCallbackRef(ref);
+                }}
                 success
                 pressOnEnter
                 isDisabled={shouldDisableButton}
@@ -796,6 +802,7 @@ function MoneyRequestConfirmationList({
         shouldShowReadOnlySplits,
         debouncedFormError,
         translate,
+        inputCallbackRef,
     ]);
 
     const listFooterContent = (

src/hooks/useAutoFocusInput.ts

@@ -1,12 +1,13 @@
 import {useFocusEffect} from '@react-navigation/native';
 import {useCallback, useContext, useEffect, useRef, useState} from 'react';
-import type {TextInput} from 'react-native';
+import type {TextInput, View} from 'react-native';
 import {InteractionManager} from 'react-native';
 import CONST from '@src/CONST';
 import * as Expensify from '@src/Expensify';
 
+type FocusRef = View | TextInput | null;
 type UseAutoFocusInput = {
-    inputCallbackRef: (ref: TextInput | null) => void;
+    inputCallbackRef: (ref: FocusRef) => void;
 };
 
 export default function useAutoFocusInput(): UseAutoFocusInput {
@@ -15,7 +16,7 @@ export default function useAutoFocusInput(): UseAutoFocusInput {
 
     const {isSplashHidden} = useContext(Expensify.SplashScreenHiddenContext);
 
-    const inputRef = useRef<TextInput | null>(null);
+    const inputRef = useRef<FocusRef>(null);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     useEffect(() => {
@@ -47,7 +48,7 @@ export default function useAutoFocusInput(): UseAutoFocusInput {
         }, []),
     );
 
-    const inputCallbackRef = (ref: TextInput | null) => {
+    const inputCallbackRef = (ref: FocusRef) => {
         inputRef.current = ref;
         if (isInputInitialized) {
             return;