fix: blue border

Author: thelullabyy

src/components/Modal/BaseModal.tsx

@@ -29,12 +29,15 @@ import ModalContext from './ModalContext';
 import ReanimatedModal from './ReanimatedModal';
 import type ReanimatedModalProps from './ReanimatedModal/types';
 import type BaseModalProps from './types';
+import type {FocusTrapOptions} from './types';
 
 const REANIMATED_MODAL_TYPES: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN];
 
 type ModalComponentProps = (ReactNativeModalProps | ReanimatedModalProps) & {
     type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
     shouldUseReanimatedModal?: boolean;
+    shouldPreventScrollOnFocus?: boolean;
+    initialFocus?: FocusTrapOptions['initialFocus'];
 };
 
 function ModalComponent({type, shouldUseReanimatedModal, ...props}: ModalComponentProps) {
@@ -334,6 +337,8 @@ function BaseModal(
                         onDismiss={handleDismissModal}
                         onSwipeComplete={onClose}
                         swipeDirection={swipeDirection}
+                        shouldPreventScrollOnFocus={shouldPreventScrollOnFocus}
+                        initialFocus={initialFocus}
                         swipeThreshold={swipeThreshold}
                         isVisible={isVisible}
                         backdropColor={theme.overlay}
@@ -363,18 +368,27 @@ function BaseModal(
                             onModalWillShow={saveFocusState}
                             onDismiss={handleDismissModal}
                         >
-                            <FocusTrapForModal
-                                active={isVisible}
-                                initialFocus={initialFocus}
-                                shouldPreventScroll={shouldPreventScrollOnFocus}
-                            >
+                            {type && !REANIMATED_MODAL_TYPES.includes(type) && !shouldUseReanimatedModal ? (
+                                <FocusTrapForModal
+                                    active={isVisible}
+                                    initialFocus={initialFocus}
+                                    shouldPreventScroll={shouldPreventScrollOnFocus}
+                                >
+                                    <Animated.View
+                                        style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
+                                        ref={ref}
+                                    >
+                                        <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
+                                    </Animated.View>
+                                </FocusTrapForModal>
+                            ) : (
                                 <Animated.View
                                     style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
                                     ref={ref}
                                 >
                                     <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
                                 </Animated.View>
-                            </FocusTrapForModal>
+                            )}
                         </ModalContent>
                         {!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}
                     </ModalComponent>

src/components/Modal/ReanimatedModal/index.tsx

@@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {NativeEventSubscription, ViewStyle} from 'react-native';
 import {BackHandler, Dimensions, InteractionManager, Modal, View} from 'react-native';
 import {LayoutAnimationConfig} from 'react-native-reanimated';
+import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlatform from '@libs/getPlatform';
@@ -41,6 +42,8 @@ function ReanimatedModal({
     onSwipeComplete,
     swipeDirection,
     swipeThreshold,
+    shouldPreventScrollOnFocus,
+    initialFocus,
     ...props
 }: ReanimatedModalProps) {
     const [isVisibleState, setIsVisibleState] = useState(isVisible);
@@ -213,7 +216,13 @@ function ReanimatedModal({
                         {isVisibleState && containerView}
                     </KeyboardAvoidingView>
                 ) : (
-                    isVisibleState && containerView
+                    <FocusTrapForModal
+                        active={isVisibleState || isTransitioning || isContainerOpen !== isVisibleState}
+                        initialFocus={initialFocus}
+                        shouldPreventScroll={shouldPreventScrollOnFocus}
+                    >
+                        {isVisibleState && containerView}
+                    </FocusTrapForModal>
                 )}
             </Modal>
         </LayoutAnimationConfig>

src/components/Modal/ReanimatedModal/types.ts

@@ -3,6 +3,7 @@ import type {NativeSyntheticEvent, StyleProp, ViewProps, ViewStyle} from 'react-
 import type {ModalProps as ReactNativeModalProps} from 'react-native-modal';
 import type {SharedValue} from 'react-native-reanimated';
 import type {ValueOf} from 'type-fest';
+import type {FocusTrapOptions} from '@components/Modal/types';
 import type CONST from '@src/CONST';
 
 type GestureProps = {
@@ -136,6 +137,12 @@ type ReanimatedModalProps = ViewProps &
 
         /** Modal type */
         type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
+
+        /** Whether to prevent scroll on focus */
+        shouldPreventScrollOnFocus?: boolean;
+
+        /** Whether to use a custom backdrop for the modal? (This prevents focus issues on desktop) */
+        initialFocus?: FocusTrapOptions['initialFocus'];
     };
 
 type BackdropProps = {

src/components/Modal/types.ts

@@ -131,4 +131,4 @@ type BaseModalProps = Partial<ReactNativeModalProps> &
     };
 
 export default BaseModalProps;
-export type {PopoverAnchorPosition, WindowState};
+export type {PopoverAnchorPosition, FocusTrapOptions, WindowState};