35756 close emoji when navigation back

src/components/EmojiPicker/EmojiPicker.js

@@ -7,6 +7,7 @@ import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as Browser from '@libs/Browser';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
 import CONST from '@src/CONST';
 import EmojiPickerMenu from './EmojiPickerMenu';
@@ -169,6 +170,7 @@ const EmojiPicker = forwardRef((props, ref) => {
     // emojis. The best alternative is to set it to 1ms so it just "pops" in and out
     return (
         <PopoverWithMeasuredContent
+            shouldHandleNavigationBack={Browser.isMobileChrome()}
             isVisible={isEmojiPickerVisible}
             onClose={hideEmojiPicker}
             onModalShow={focusEmojiSearchInput}

src/components/Modal/index.tsx

@@ -1,12 +1,12 @@
-import React, {useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import StatusBar from '@libs/StatusBar';
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
 
-function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = () => {}, children, ...rest}: BaseModalProps) {
+function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = () => {}, children, shouldHandleNavigationBack, ...rest}: BaseModalProps) {
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
     const [previousStatusBarColor, setPreviousStatusBarColor] = useState<string>();
@@ -22,8 +22,15 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     const hideModal = () => {
         setStatusBarColor(previousStatusBarColor);
         onModalHide();
+        if (window.history.state.shouldGoBack) {
+            window.history.back();
+        }
     };
 
+    const handlePopStateRef = useRef(() => {
+        rest.onClose();
+    });
+
     const showModal = () => {
         const statusBarColor = StatusBar.getBackgroundColor() ?? theme.appBG;
 
@@ -35,9 +42,20 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
             setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
         }
 
+        if (shouldHandleNavigationBack) {
+            window.history.pushState({shouldGoBack: true}, '', null);
+            window.addEventListener('popstate', handlePopStateRef.current);
+        }
         onModalShow?.();
     };
 
+    useEffect(
+        () => () => {
+            window.removeEventListener('popstate', handlePopStateRef.current);
+        },
+        [],
+    );
+
     return (
         <BaseModal
             // eslint-disable-next-line react/jsx-props-no-spreading

src/components/Modal/types.ts

@@ -63,6 +63,9 @@ type BaseModalProps = Partial<ModalProps> & {
      * */
     hideModalContentWhileAnimating?: boolean;
 
+    /** Whether handle navigation back when modal show. */
+    shouldHandleNavigationBack?: boolean;
+
     /** Should we use a custom backdrop for the modal? (This prevents focus issues on desktop) */
     shouldUseCustomBackdrop?: boolean;
 };

src/components/Popover/index.tsx

@@ -92,6 +92,7 @@ function Popover(props: PopoverProps) {
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             onClose={onCloseWithPopoverContext}
+            shouldHandleNavigationBack={props.shouldHandleNavigationBack}
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
             popoverAnchorPosition={isSmallScreenWidth ? undefined : anchorPosition}
             fullscreen={isSmallScreenWidth ? true : fullscreen}

src/components/Popover/types.ts

@@ -37,6 +37,9 @@ type PopoverProps = BaseModalProps &
 
         /** Whether we want to show the popover on the right side of the screen */
         fromSidebarMediumScreen?: boolean;
+
+        /** Whether handle navigation back when modal show. */
+        shouldHandleNavigationBack?: boolean;
     };
 
 type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;

src/components/PopoverWithMeasuredContent.tsx

@@ -14,6 +14,9 @@ import type {WindowDimensionsProps} from './withWindowDimensions/types';
 type PopoverWithMeasuredContentProps = Omit<PopoverProps, 'anchorPosition' | keyof WindowDimensionsProps> & {
     /** The horizontal and vertical anchors points for the popover */
     anchorPosition: AnchorPosition;
+
+    /** Whether handle navigation back when modal show. */
+    shouldHandleNavigationBack?: boolean;
 };
 
 /**
@@ -42,6 +45,7 @@ function PopoverWithMeasuredContent({
     statusBarTranslucent = true,
     avoidKeyboard = false,
     hideModalContentWhileAnimating = false,
+    shouldHandleNavigationBack = false,
     ...props
 }: PopoverWithMeasuredContentProps) {
     const styles = useThemeStyles();
@@ -117,6 +121,7 @@ function PopoverWithMeasuredContent({
     };
     return isContentMeasured ? (
         <Popover
+            shouldHandleNavigationBack={shouldHandleNavigationBack}
             popoverDimensions={popoverDimensions}
             anchorAlignment={anchorAlignment}
             isVisible={isVisible}