Merge pull request #39927 from software-mansion-labs/onboarding/escap…

…e-button-fix

[BUGFIX] Onboarding - Modal can be dismissed by ESC key

src/hooks/useDisableModalDismissOnEscape.ts

@@ -0,0 +1,9 @@
+import {useEffect} from 'react';
+import * as Modal from '@userActions/Modal';
+
+export default function useDisableModalDismissOnEscape() {
+    useEffect(() => {
+        Modal.setDisableDismissOnEscape(true);
+        return () => Modal.setDisableDismissOnEscape(false);
+    }, []);
+}

src/libs/actions/Modal.ts

@@ -69,6 +69,13 @@ function setModalVisibility(isVisible: boolean) {
     Onyx.merge(ONYXKEYS.MODAL, {isVisible});
 }
 
+/**
+ * Allows other parts of the app to set whether modals should be dismissable using the Escape key
+ */
+function setDisableDismissOnEscape(disableDismissOnEscape: boolean) {
+    Onyx.merge(ONYXKEYS.MODAL, {disableDismissOnEscape});
+}
+
 /**
  * Allows other parts of app to know that an alert modal is about to open.
  * This will trigger as soon as a modal is opened but not yet visible while animation is running.
@@ -78,4 +85,4 @@ function willAlertModalBecomeVisible(isVisible: boolean, isPopover = false) {
     Onyx.merge(ONYXKEYS.MODAL, {willAlertModalBecomeVisible: isVisible, isPopover});
 }
 
-export {setCloseModal, close, onModalDidClose, setModalVisibility, willAlertModalBecomeVisible, closeTop};
+export {setCloseModal, close, onModalDidClose, setModalVisibility, willAlertModalBecomeVisible, setDisableDismissOnEscape, closeTop};

src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

@@ -10,6 +10,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
+import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape';
 import useLocalize from '@hooks/useLocalize';
 import useOnboardingLayout from '@hooks/useOnboardingLayout';
 import useTheme from '@hooks/useTheme';
@@ -36,6 +37,8 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
     const {isSmallScreenWidth} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useOnboardingLayout();
 
+    useDisableModalDismissOnEscape();
+
     const saveAndNavigate = useCallback((values: FormOnyxValues<'onboardingPersonalDetailsForm'>) => {
         PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim());
 

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -12,6 +12,7 @@ import MenuItemList from '@components/MenuItemList';
 import OfflineIndicator from '@components/OfflineIndicator';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
+import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape';
 import useLocalize from '@hooks/useLocalize';
 import useOnboardingLayout from '@hooks/useOnboardingLayout';
 import useTheme from '@hooks/useTheme';
@@ -47,6 +48,8 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on
     const [error, setError] = useState(false);
     const theme = useTheme();
 
+    useDisableModalDismissOnEscape();
+
     const PurposeFooterInstance = <OfflineIndicator />;
 
     useEffect(() => {

src/pages/home/sidebar/SidebarLinks.tsx

@@ -80,6 +80,10 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                     return;
                 }
 
+                if (modal.current.disableDismissOnEscape) {
+                    return;
+                }
+
                 Navigation.dismissModal();
             },
             shortcutConfig.descriptionKey,

src/types/onyx/Modal.ts

@@ -2,6 +2,9 @@ type Modal = {
     /** Indicates when an Alert modal is about to be visible */
     willAlertModalBecomeVisible?: boolean;
 
+    /** Indicates whether the modal should be dismissable using the ESCAPE key */
+    disableDismissOnEscape?: boolean;
+
     /** Indicates if there is a modal currently visible or not */
     isVisible?: boolean;