diff --git a/src/hooks/useDisableModalDismissOnEscape.ts b/src/hooks/useDisableModalDismissOnEscape.ts new file mode 100644 index 000000000000..c24323265565 --- /dev/null +++ b/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); + }, []); +} diff --git a/src/libs/actions/Modal.ts b/src/libs/actions/Modal.ts index 6351d0165544..7de4548b92c9 100644 --- a/src/libs/actions/Modal.ts +++ b/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}; diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index f49c5c0f506e..dd5707ef3507 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/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()); diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index ae43f850018b..3b82a79e6c48 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/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 = ; useEffect(() => { diff --git a/src/pages/home/sidebar/SidebarLinks.tsx b/src/pages/home/sidebar/SidebarLinks.tsx index 27f328be726a..4114b2f15135 100644 --- a/src/pages/home/sidebar/SidebarLinks.tsx +++ b/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, diff --git a/src/types/onyx/Modal.ts b/src/types/onyx/Modal.ts index 1a38864f30d6..1ea96cd283ce 100644 --- a/src/types/onyx/Modal.ts +++ b/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;