diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx index ebf30d773f09..47486fd32791 100644 --- a/src/components/Popover/index.tsx +++ b/src/components/Popover/index.tsx @@ -27,7 +27,6 @@ function Popover(props: PopoverProps) { anchorRef = () => {}, animationIn = 'fadeIn', animationOut = 'fadeOut', - shouldCloseWhenBrowserNavigationChanged = true, } = props; const {isSmallScreenWidth} = useResponsiveLayout(); @@ -37,20 +36,18 @@ function Popover(props: PopoverProps) { // Not adding this inside the PopoverProvider // because this is an issue on smaller screens as well. React.useEffect(() => { - if (!shouldCloseWhenBrowserNavigationChanged) { - return; - } const listener = () => { if (!isVisible) { return; } + onClose(); }; window.addEventListener('popstate', listener); return () => { window.removeEventListener('popstate', listener); }; - }, [onClose, isVisible, shouldCloseWhenBrowserNavigationChanged]); + }, [onClose, isVisible]); const onCloseWithPopoverContext = () => { if (popover && 'current' in anchorRef) { diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts index 1db09d0b2f9f..4e2f38293f6e 100644 --- a/src/components/Popover/types.ts +++ b/src/components/Popover/types.ts @@ -38,8 +38,8 @@ type PopoverProps = BaseModalProps & /** Whether we want to show the popover on the right side of the screen */ fromSidebarMediumScreen?: boolean; - /** Whether we should close when browser navigation change. This doesn't affect native platform */ - shouldCloseWhenBrowserNavigationChanged?: boolean; + /** Whether handle navigation back when modal show. */ + shouldHandleNavigationBack?: boolean; }; type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps; diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx index bb76ea0290f3..5860791818c4 100644 --- a/src/components/ProcessMoneyRequestHoldMenu.tsx +++ b/src/components/ProcessMoneyRequestHoldMenu.tsx @@ -1,5 +1,4 @@ -import {useNavigation} from '@react-navigation/native'; -import React, {useEffect, useRef} from 'react'; +import React, {useRef} from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -32,14 +31,6 @@ function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosit const {translate} = useLocalize(); const styles = useThemeStyles(); const popoverRef = useRef(null); - const navigation = useNavigation(); - - useEffect(() => { - const unsub = navigation.addListener('beforeRemove', () => { - onClose(); - }); - return unsub; - }, [navigation, onClose]); return (