From 8ea4f6fea9ef17b80e2fb66b03e653da6e72e4b8 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 27 Sep 2023 15:29:48 +0700 Subject: [PATCH 01/10] fix: 28241 --- src/components/PopoverWithoutOverlay/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 778f65349969..5922aa6fd6ab 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -8,6 +8,7 @@ import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import getModalStyles from '../../styles/getModalStyles'; import withWindowDimensions from '../withWindowDimensions'; +import usePrevious from '../../hooks/usePrevious'; function Popover(props) { const ref = React.useRef(null); @@ -24,6 +25,7 @@ function Popover(props) { props.outerStyle, ); + const prevIsVisible = usePrevious(props.isVisible); React.useEffect(() => { if (props.isVisible) { props.onModalShow(); @@ -38,11 +40,15 @@ function Popover(props) { Modal.onModalDidClose(); } Modal.willAlertModalBecomeVisible(props.isVisible); + + if (prevIsVisible === props.isVisible) { + return; + } Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null); // We want this effect to run strictly ONLY when isVisible prop changes // eslint-disable-next-line react-hooks/exhaustive-deps - }, [props.isVisible]); + }, [props.isVisible, prevIsVisible]); if (!props.isVisible) { return null; From 610b1aef9f1c926fcb719b57b7727f50ed0dd2d3 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Fri, 29 Sep 2023 20:48:44 +0700 Subject: [PATCH 02/10] fix lint --- src/components/PopoverWithoutOverlay/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 5922aa6fd6ab..783d3cc2bc35 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -40,7 +40,6 @@ function Popover(props) { Modal.onModalDidClose(); } Modal.willAlertModalBecomeVisible(props.isVisible); - if (prevIsVisible === props.isVisible) { return; } From 9e7498ad288b5dd1262f678b73c1b311ae23a9b2 Mon Sep 17 00:00:00 2001 From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com> Date: Fri, 6 Oct 2023 18:22:36 +0700 Subject: [PATCH 03/10] Update src/components/PopoverWithoutOverlay/index.js Co-authored-by: Rajat Parashar --- src/components/PopoverWithoutOverlay/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 783d3cc2bc35..b87639f34eed 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -26,6 +26,7 @@ function Popover(props) { ); const prevIsVisible = usePrevious(props.isVisible); + React.useEffect(() => { if (props.isVisible) { props.onModalShow(); From 48dc3b678f3aa7730330fb8b22c2734eef3b2ac1 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Sat, 7 Oct 2023 19:34:03 +0700 Subject: [PATCH 04/10] add explaination comment --- src/components/PopoverWithoutOverlay/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index b87639f34eed..45cad8fd3ad4 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -41,6 +41,8 @@ function Popover(props) { Modal.onModalDidClose(); } Modal.willAlertModalBecomeVisible(props.isVisible); + + // We prevent setting closeModal function to null when the first time the component is rendered if (prevIsVisible === props.isVisible) { return; } From 4378d80a2b86c741132d29da1c971f8c25d3273c Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Sat, 7 Oct 2023 20:32:49 +0700 Subject: [PATCH 05/10] fix lint --- src/components/PopoverWithoutOverlay/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 45cad8fd3ad4..5347aaf619c0 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -26,7 +26,7 @@ function Popover(props) { ); const prevIsVisible = usePrevious(props.isVisible); - + React.useEffect(() => { if (props.isVisible) { props.onModalShow(); From 859bccfdd812e432c831ddf964f34a87fa859b5f Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Sun, 8 Oct 2023 15:11:03 +0700 Subject: [PATCH 06/10] add first render ref --- src/components/PopoverWithoutOverlay/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 93b73e9a7ce4..ce81c404f25a 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef } from 'react'; import {View} from 'react-native'; import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; import {PopoverContext} from '../PopoverProvider'; @@ -12,6 +12,7 @@ import usePrevious from '../../hooks/usePrevious'; function Popover(props) { const {onOpen, close} = React.useContext(PopoverContext); + const firstRenderRef = useRef(true); const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles( 'popover', { @@ -42,9 +43,15 @@ function Popover(props) { Modal.willAlertModalBecomeVisible(props.isVisible); // We prevent setting closeModal function to null when the first time the component is rendered - if (prevIsVisible === props.isVisible) { + if ((prevIsVisible === props.isVisible) && (!firstRenderRef.current || !props.isVisible)) { + if (firstRenderRef.current) { + firstRenderRef.current = false; + } return; } + if (firstRenderRef.current) { + firstRenderRef.current = false; + } Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null); // We want this effect to run strictly ONLY when isVisible prop changes From 865b027194fd64e70fe275bc9d8128a21ba85b04 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Sun, 8 Oct 2023 15:13:42 +0700 Subject: [PATCH 07/10] update comment --- src/components/PopoverWithoutOverlay/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index ce81c404f25a..5fe3e7a15004 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -42,7 +42,7 @@ function Popover(props) { } Modal.willAlertModalBecomeVisible(props.isVisible); - // We prevent setting closeModal function to null when the first time the component is rendered + // We prevent setting closeModal function to null when the component is invisible the first time it is rendered if ((prevIsVisible === props.isVisible) && (!firstRenderRef.current || !props.isVisible)) { if (firstRenderRef.current) { firstRenderRef.current = false; From ff5cd420d65cee3fe494739f05a06531eab158e8 Mon Sep 17 00:00:00 2001 From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:30:29 +0700 Subject: [PATCH 08/10] Update src/components/PopoverWithoutOverlay/index.js Co-authored-by: Rajat Parashar --- src/components/PopoverWithoutOverlay/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 5fe3e7a15004..599d443a7b4a 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -44,9 +44,7 @@ function Popover(props) { // We prevent setting closeModal function to null when the component is invisible the first time it is rendered if ((prevIsVisible === props.isVisible) && (!firstRenderRef.current || !props.isVisible)) { - if (firstRenderRef.current) { firstRenderRef.current = false; - } return; } if (firstRenderRef.current) { From 8a182484aa01962873d747b2479c541fdb549f66 Mon Sep 17 00:00:00 2001 From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:30:37 +0700 Subject: [PATCH 09/10] Update src/components/PopoverWithoutOverlay/index.js Co-authored-by: Rajat Parashar --- src/components/PopoverWithoutOverlay/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 599d443a7b4a..12c5ee16a75f 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -47,9 +47,7 @@ function Popover(props) { firstRenderRef.current = false; return; } - if (firstRenderRef.current) { firstRenderRef.current = false; - } Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null); // We want this effect to run strictly ONLY when isVisible prop changes From 7d4892ab17c1cbf7e4443fc5e92e842a01eaee55 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Sun, 8 Oct 2023 15:32:05 +0700 Subject: [PATCH 10/10] fix lint --- src/components/PopoverWithoutOverlay/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 12c5ee16a75f..d35637958f1d 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, {useRef} from 'react'; import {View} from 'react-native'; import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; import {PopoverContext} from '../PopoverProvider'; @@ -43,11 +43,11 @@ function Popover(props) { Modal.willAlertModalBecomeVisible(props.isVisible); // We prevent setting closeModal function to null when the component is invisible the first time it is rendered - if ((prevIsVisible === props.isVisible) && (!firstRenderRef.current || !props.isVisible)) { - firstRenderRef.current = false; + if (prevIsVisible === props.isVisible && (!firstRenderRef.current || !props.isVisible)) { + firstRenderRef.current = false; return; } - firstRenderRef.current = false; + firstRenderRef.current = false; Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null); // We want this effect to run strictly ONLY when isVisible prop changes