Merge pull request #28688 from shubham1206agra/fix-popover

Fix: emoji picker hides on resize window
Expensify · Oct 4, 2023 · ef30730 · ef30730
2 parents 180fd60 + b7d6470
commit ef30730
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
@@ -1,17 +1,20 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {createPortal} from 'react-dom';
 import {propTypes, defaultProps} from './popoverPropTypes';
 import CONST from '../../CONST';
 import Modal from '../Modal';
 import withWindowDimensions from '../withWindowDimensions';
 import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
+import {PopoverContext} from '../PopoverProvider';
 
 /*
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
 function Popover(props) {
-    const {isVisible, onClose, isSmallScreenWidth, fullscreen, animationInTiming, onLayout, animationOutTiming, disableAnimation, withoutOverlay, anchorPosition} = props;
+    const {isVisible, onClose, isSmallScreenWidth, fullscreen, animationInTiming, onLayout, animationOutTiming, disableAnimation, withoutOverlay, anchorPosition, anchorRef} = props;
+    const withoutOverlayRef = useRef(null);
+    const {close, popover} = React.useContext(PopoverContext);
 
     // Not adding this inside the PopoverProvider
     // because this is an issue on smaller screens as well.
@@ -29,11 +32,19 @@ function Popover(props) {
         };
     }, [onClose, isVisible]);
 
+    const onCloseWithPopoverContext = () => {
+        if (popover) {
+            close(anchorRef);
+        }
+        onClose();
+    };
+
     if (!fullscreen && !isSmallScreenWidth) {
         return createPortal(
             <Modal
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
+                onClose={onCloseWithPopoverContext}
                 type={CONST.MODAL.MODAL_TYPE.POPOVER}
                 popoverAnchorPosition={anchorPosition}
                 animationInTiming={disableAnimation ? 1 : animationInTiming}
@@ -46,14 +57,21 @@ function Popover(props) {
     }
 
     if (withoutOverlay && !isSmallScreenWidth) {
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return createPortal(<PopoverWithoutOverlay {...props} />, document.body);
+        return createPortal(
+            <PopoverWithoutOverlay
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                withoutOverlayRef={withoutOverlayRef}
+            />,
+            document.body,
+        );
     }
 
     return (
         <Modal
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            onClose={onCloseWithPopoverContext}
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
             popoverAnchorPosition={isSmallScreenWidth ? undefined : anchorPosition}
             fullscreen={isSmallScreenWidth ? true : fullscreen}

diff --git a/src/components/Popover/popoverPropTypes.js b/src/components/Popover/popoverPropTypes.js
@@ -23,6 +23,9 @@ const propTypes = {
 
     /** Whether disable the animations */
     disableAnimation: PropTypes.bool,
+
+    /** The ref of the popover */
+    withoutOverlayRef: refPropTypes,
 };
 
 const defaultProps = {
@@ -36,6 +39,7 @@ const defaultProps = {
     anchorPosition: {},
     anchorRef: () => {},
     disableAnimation: true,
+    withoutOverlayRef: () => {},
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
@@ -10,7 +10,6 @@ import getModalStyles from '../../styles/getModalStyles';
 import withWindowDimensions from '../withWindowDimensions';
 
 function Popover(props) {
-    const ref = React.useRef(null);
     const {onOpen, close} = React.useContext(PopoverContext);
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
         'popover',
@@ -28,7 +27,7 @@ function Popover(props) {
         if (props.isVisible) {
             props.onModalShow();
             onOpen({
-                ref,
+                ref: props.withoutOverlayRef,
                 close: props.onClose,
                 anchorRef: props.anchorRef,
             });
@@ -51,7 +50,7 @@ function Popover(props) {
     return (
         <View
             style={[modalStyle, {zIndex: 1}]}
-            ref={ref}
+            ref={props.withoutOverlayRef}
         >
             <SafeAreaInsetsContext.Consumer>
                 {(insets) => {