Merge pull request Expensify#73062 from bernhardoj/fix/72454-keyboard-shows-while-delete-confirm-modal-is-visible

Fix keyboard is shown while waypoint delete confirm modal is visible

Author: rlinoz

src/components/FocusTrap/FocusTrapForModal/FocusTrapForModalProps.ts

@@ -7,6 +7,7 @@ type FocusTrapForModalProps = {
     active: boolean;
     initialFocus?: FocusTrapOptions['initialFocus'];
     shouldPreventScroll?: boolean;
+    shouldReturnFocus?: boolean;
 };
 
 export default FocusTrapForModalProps;

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

@@ -5,7 +5,7 @@ import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import type FocusTrapForModalProps from './FocusTrapForModalProps';
 
-function FocusTrapForModal({children, active, initialFocus = false, shouldPreventScroll = false}: FocusTrapForModalProps) {
+function FocusTrapForModal({children, active, initialFocus = false, shouldPreventScroll = false, shouldReturnFocus = true}: FocusTrapForModalProps) {
     return (
         <FocusTrap
             active={active}
@@ -20,7 +20,10 @@ function FocusTrapForModal({children, active, initialFocus = false, shouldPreven
                     if (ReportActionComposeFocusManager.isFocused()) {
                         return false;
                     }
-                    return element;
+                    if (shouldReturnFocus) {
+                        return element;
+                    }
+                    return false;
                 },
             }}
         >

src/components/Modal/BaseModal.tsx

@@ -354,6 +354,7 @@ function BaseModal({
                         customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
                         type={type}
                         shouldIgnoreBackHandlerDuringTransition={shouldIgnoreBackHandlerDuringTransition}
+                        shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
                     >
                         <Animated.View
                             onLayout={onViewLayout}

src/components/Modal/ReanimatedModal/index.tsx

@@ -46,6 +46,7 @@ function ReanimatedModal({
     shouldPreventScrollOnFocus,
     initialFocus,
     shouldIgnoreBackHandlerDuringTransition = false,
+    shouldEnableNewFocusManagement,
     ...props
 }: ReanimatedModalProps) {
     const [isVisibleState, setIsVisibleState] = useState(isVisible);
@@ -239,6 +240,7 @@ function ReanimatedModal({
                     <FocusTrapForModal
                         active={modalVisibility}
                         initialFocus={initialFocus}
+                        shouldReturnFocus={!shouldEnableNewFocusManagement}
                         shouldPreventScroll={shouldPreventScrollOnFocus}
                     >
                         {isVisibleState && containerView}

src/components/Modal/ReanimatedModal/types.ts

@@ -137,6 +137,12 @@ type ReanimatedModalProps = ViewProps &
         /** Whether to use a custom backdrop for the modal? (This prevents focus issues on desktop) */
         initialFocus?: FocusTrapOptions['initialFocus'];
 
+        /**
+         * Whether the modal should enable the new focus manager.
+         * We are attempting to migrate to a new refocus manager, adding this property for gradual migration.
+         * */
+        shouldEnableNewFocusManagement?: boolean;
+
         /** Whether to ignore the back handler during transition */
         shouldIgnoreBackHandlerDuringTransition?: boolean;
     };

src/components/PopoverMenu.tsx

@@ -526,7 +526,10 @@ function BasePopoverMenu({
             shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}
             testID={testID}
         >
-            <FocusTrapForModal active={isVisible}>
+            <FocusTrapForModal
+                active={isVisible}
+                shouldReturnFocus={!shouldEnableNewFocusManagement}
+            >
                 <View
                     onLayout={onLayout}
                     style={[menuContainerStyle, containerStyles, {paddingTop, paddingBottom, paddingVertical, ...(isWebOrDesktop ? styles.flex1 : styles.flexGrow1)}]}