From ec50dcea20585a4fd6702d6abdefe1f4612a04b4 Mon Sep 17 00:00:00 2001
From: Shubham Agrawal <shubham.agra1206@gmail.com>
Date: Tue, 3 Oct 2023 13:11:46 +0530
Subject: [PATCH 1/2] fix popover for resizing

---
 src/components/Popover/index.js               | 13 ++++++++++---
 src/components/Popover/popoverPropTypes.js    |  4 ++++
 src/components/PopoverWithoutOverlay/index.js |  5 ++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index a886fbbd0c6b..f425b82baf5a 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {createPortal} from 'react-dom';
 import {propTypes, defaultProps} from './popoverPropTypes';
 import CONST from '../../CONST';
@@ -12,6 +12,7 @@ import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
  */
 function Popover(props) {
     const {isVisible, onClose, isSmallScreenWidth, fullscreen, animationInTiming, onLayout, animationOutTiming, disableAnimation, withoutOverlay, anchorPosition} = props;
+    const withoutOverlayRef = useRef(null);
 
     // Not adding this inside the PopoverProvider
     // because this is an issue on smaller screens as well.
@@ -46,8 +47,14 @@ 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 (
diff --git a/src/components/Popover/popoverPropTypes.js b/src/components/Popover/popoverPropTypes.js
index 8b22a58fc407..c6d0d06501a9 100644
--- 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
index 778f65349969..7287f36e7f2c 100644
--- 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) => {

From b7d6470719d1138eac687030cf9d928ed3c35eff Mon Sep 17 00:00:00 2001
From: Shubham Agrawal <shubham.agra1206@gmail.com>
Date: Wed, 4 Oct 2023 12:49:29 +0530
Subject: [PATCH 2/2] fix proper closing of popover context

---
 src/components/Popover/index.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index f425b82baf5a..174570d5ed7f 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -5,14 +5,16 @@ 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.
@@ -30,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}
@@ -61,6 +71,7 @@ function Popover(props) {
         <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}