From 9fc3688e75902c182cebd8243f29d0baf147aa26 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 14 Sep 2023 19:07:17 +0500
Subject: [PATCH 1/5] fix: close the popover when the browser history changes

---
 src/components/PopoverProvider/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/PopoverProvider/index.js b/src/components/PopoverProvider/index.js
index efa230d920d5..7212bb741c6e 100644
--- a/src/components/PopoverProvider/index.js
+++ b/src/components/PopoverProvider/index.js
@@ -100,6 +100,14 @@ function PopoverContextProvider(props) {
         };
     }, [closePopover]);
 
+    React.useEffect(() => {
+        const listener = () => closePopover();
+        window.addEventListener('popstate', listener);
+        return () => {
+            window.removeEventListener('popstate', listener);
+        };
+    }, [closePopover]);
+
     const onOpen = React.useCallback(
         (popoverParams) => {
             if (activePopoverRef.current && activePopoverRef.current.ref !== popoverParams.ref) {

From 197613af429f9a7af29634720de170760ec76757 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 14 Sep 2023 19:57:52 +0500
Subject: [PATCH 2/5] fix: move the popstate listener inside Popover component

---
 src/components/Popover/index.js         | 16 ++++++++++++++++
 src/components/PopoverProvider/index.js |  8 --------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index bfd02ba1d3e3..fe04c4d69be6 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -11,6 +11,22 @@ import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
 function Popover(props) {
+    // Not adding this inside the PopoverProvider
+    // because this is an issue on smaller screens as well.
+    React.useEffect(() => {
+        const listener = () => {
+            if (!props.isVisible) {
+                return;
+            }
+
+            props.onClose();
+        };
+        window.addEventListener('popstate', listener);
+        return () => {
+            window.removeEventListener('popstate', listener);
+        };
+    }, [props.onClose, props.isVisible]);
+
     if (!props.fullscreen && !props.isSmallScreenWidth) {
         return createPortal(
             <Modal
diff --git a/src/components/PopoverProvider/index.js b/src/components/PopoverProvider/index.js
index 7212bb741c6e..efa230d920d5 100644
--- a/src/components/PopoverProvider/index.js
+++ b/src/components/PopoverProvider/index.js
@@ -100,14 +100,6 @@ function PopoverContextProvider(props) {
         };
     }, [closePopover]);
 
-    React.useEffect(() => {
-        const listener = () => closePopover();
-        window.addEventListener('popstate', listener);
-        return () => {
-            window.removeEventListener('popstate', listener);
-        };
-    }, [closePopover]);
-
     const onOpen = React.useCallback(
         (popoverParams) => {
             if (activePopoverRef.current && activePopoverRef.current.ref !== popoverParams.ref) {

From 6c5cd02b56d3140f7d2aa2557c562e453e89984e Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 14 Sep 2023 20:16:34 +0500
Subject: [PATCH 3/5] fix: lint errors

---
 src/components/Popover/index.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index fe04c4d69be6..f2c61b38c008 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -11,39 +11,40 @@ import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
  * 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;
     // Not adding this inside the PopoverProvider
     // because this is an issue on smaller screens as well.
     React.useEffect(() => {
         const listener = () => {
-            if (!props.isVisible) {
+            if (!isVisible) {
                 return;
             }
 
-            props.onClose();
+            onClose();
         };
         window.addEventListener('popstate', listener);
         return () => {
             window.removeEventListener('popstate', listener);
         };
-    }, [props.onClose, props.isVisible]);
+    }, [onClose, isVisible]);
 
-    if (!props.fullscreen && !props.isSmallScreenWidth) {
+    if (!fullscreen && !isSmallScreenWidth) {
         return createPortal(
             <Modal
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
                 type={CONST.MODAL.MODAL_TYPE.POPOVER}
-                popoverAnchorPosition={props.anchorPosition}
-                animationInTiming={props.disableAnimation ? 1 : props.animationInTiming}
-                animationOutTiming={props.disableAnimation ? 1 : props.animationOutTiming}
+                popoverAnchorPosition={anchorPosition}
+                animationInTiming={disableAnimation ? 1 : animationInTiming}
+                animationOutTiming={disableAnimation ? 1 : animationOutTiming}
                 shouldCloseOnOutsideClick
-                onLayout={props.onLayout}
+                onLayout={onLayout}
             />,
             document.body,
         );
     }
 
-    if (props.withoutOverlay && !props.isSmallScreenWidth) {
+    if (withoutOverlay && !isSmallScreenWidth) {
         // eslint-disable-next-line react/jsx-props-no-spreading
         return createPortal(<PopoverWithoutOverlay {...props} />, document.body);
     }
@@ -52,12 +53,12 @@ function Popover(props) {
         <Modal
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
-            popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
-            fullscreen={props.isSmallScreenWidth ? true : props.fullscreen}
-            animationInTiming={props.disableAnimation && !props.isSmallScreenWidth ? 1 : props.animationInTiming}
-            animationOutTiming={props.disableAnimation && !props.isSmallScreenWidth ? 1 : props.animationOutTiming}
-            onLayout={props.onLayout}
+            type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
+            popoverAnchorPosition={isSmallScreenWidth ? undefined : anchorPosition}
+            fullscreen={isSmallScreenWidth ? true : fullscreen}
+            animationInTiming={disableAnimation && !isSmallScreenWidth ? 1 : animationInTiming}
+            animationOutTiming={disableAnimation && !isSmallScreenWidth ? 1 : animationOutTiming}
+            onLayout={onLayout}
         />
     );
 }

From 766041a3ad80dfb00fe64252d5914d9a9575f651 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 15 Sep 2023 15:53:52 +0500
Subject: [PATCH 4/5] feat: add blank line

---
 src/components/Popover/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index f2c61b38c008..25cb5f92e2e2 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -12,6 +12,7 @@ import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
  */
 function Popover(props) {
     const {isVisible, onClose, isSmallScreenWidth, fullscreen, animationInTiming, onLayout, animationOutTiming, disableAnimation, withoutOverlay, anchorPosition} = props;
+    
     // Not adding this inside the PopoverProvider
     // because this is an issue on smaller screens as well.
     React.useEffect(() => {

From 62a35bb169dab9ed68bac3e97c9a1ed923bf7b4b Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 15 Sep 2023 16:00:39 +0500
Subject: [PATCH 5/5] lint fix

---
 src/components/Popover/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index 25cb5f92e2e2..a886fbbd0c6b 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -12,7 +12,7 @@ import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
  */
 function Popover(props) {
     const {isVisible, onClose, isSmallScreenWidth, fullscreen, animationInTiming, onLayout, animationOutTiming, disableAnimation, withoutOverlay, anchorPosition} = props;
-    
+
     // Not adding this inside the PopoverProvider
     // because this is an issue on smaller screens as well.
     React.useEffect(() => {