Merge pull request Expensify#67045 from thelullabyy/fix/66693/blue-border

Workspace - Usd currency changed displays blue border.

Author: aldo-expensify

src/components/Modal/BaseModal.tsx

@@ -31,28 +31,77 @@ 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'];
+    isVisible: boolean;
+    isKeyboardActive: boolean;
+    saveFocusState: () => void;
 };
 
-function ModalComponent({type, shouldUseReanimatedModal, ...props}: ModalComponentProps) {
+function ModalComponent({
+    type,
+    shouldUseReanimatedModal,
+    isVisible,
+    shouldPreventScrollOnFocus,
+    initialFocus,
+    children,
+    saveFocusState,
+    onDismiss = () => {},
+    isKeyboardActive,
+    ...props
+}: ModalComponentProps) {
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     if ((type && REANIMATED_MODAL_TYPES.includes(type)) || shouldUseReanimatedModal) {
         return (
             <ReanimatedModal
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...(props as ReanimatedModalProps)}
                 type={type}
-            />
+                isVisible={isVisible}
+                shouldPreventScrollOnFocus={shouldPreventScrollOnFocus}
+                initialFocus={initialFocus}
+                onDismiss={onDismiss}
+            >
+                <ModalContent
+                    onModalWillShow={saveFocusState}
+                    onDismiss={onDismiss}
+                >
+                    {children}
+                </ModalContent>
+                {!isKeyboardActive && <NavigationBar />}
+            </ReanimatedModal>
         );
     }
 
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <ReactNativeModal {...(props as ReactNativeModalProps)} />;
+    return (
+        <ReactNativeModal
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...(props as ReactNativeModalProps)}
+            isVisible={isVisible}
+            onDismiss={onDismiss}
+        >
+            <ModalContent
+                onModalWillShow={saveFocusState}
+                onDismiss={onDismiss}
+            >
+                <FocusTrapForModal
+                    active={isVisible}
+                    initialFocus={initialFocus}
+                    shouldPreventScroll={shouldPreventScrollOnFocus}
+                >
+                    {children}
+                </FocusTrapForModal>
+            </ModalContent>
+            {!isKeyboardActive && <NavigationBar />}
+        </ReactNativeModal>
+    );
 }
 
 function BaseModal(
@@ -379,6 +428,8 @@ function BaseModal(
                         onDismiss={handleDismissModal}
                         onSwipeComplete={onClose}
                         swipeDirection={swipeDirection}
+                        shouldPreventScrollOnFocus={shouldPreventScrollOnFocus}
+                        initialFocus={initialFocus}
                         swipeThreshold={swipeThreshold}
                         isVisible={isVisible}
                         backdropColor={theme.overlay}
@@ -403,26 +454,16 @@ function BaseModal(
                         customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
                         type={type}
                         shouldUseReanimatedModal={shouldUseReanimatedModal}
+                        isKeyboardActive={keyboardStateContextValue?.isKeyboardActive}
+                        saveFocusState={saveFocusState}
                     >
-                        <ModalContent
-                            onModalWillShow={saveFocusState}
-                            onDismiss={handleDismissModal}
+                        <Animated.View
+                            onLayout={onViewLayout}
+                            style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
+                            ref={ref}
                         >
-                            <FocusTrapForModal
-                                active={isVisible}
-                                initialFocus={initialFocus}
-                                shouldPreventScroll={shouldPreventScrollOnFocus}
-                            >
-                                <Animated.View
-                                    onLayout={onViewLayout}
-                                    style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
-                                    ref={ref}
-                                >
-                                    <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
-                                </Animated.View>
-                            </FocusTrapForModal>
-                        </ModalContent>
-                        {!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}
+                            <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
+                        </Animated.View>
                     </ModalComponent>
                 </View>
             </ScreenWrapperOfflineIndicatorContext.Provider>

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);
@@ -184,13 +187,14 @@ function ReanimatedModal({
         );
     }
     const isBackdropMounted = isVisibleState || ((isTransitioning || isContainerOpen !== isVisibleState) && getPlatform() === CONST.PLATFORM.WEB);
+    const modalVisibility = isVisibleState || isTransitioning || isContainerOpen !== isVisibleState;
     return (
         <LayoutAnimationConfig skipExiting={getPlatform() !== CONST.PLATFORM.WEB}>
             <Modal
                 transparent
                 animationType="none"
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                visible={isVisibleState || isTransitioning || isContainerOpen !== isVisibleState}
+                visible={modalVisibility}
                 onRequestClose={onBackButtonPress}
                 statusBarTranslucent={statusBarTranslucent}
                 testID={testID}
@@ -213,7 +217,13 @@ function ReanimatedModal({
                         {isVisibleState && containerView}
                     </KeyboardAvoidingView>
                 ) : (
-                    isVisibleState && containerView
+                    <FocusTrapForModal
+                        active={modalVisibility}
+                        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

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