From b5fa0e04541f667985c71d19b70dc81107b51a4d Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 27 Mar 2025 15:43:31 +0100 Subject: [PATCH 1/5] Enhance PopoverWithMeasuredContent: Add useEffect to reset content measurement on visibility change and include debug logs for measurement and visibility state. --- src/components/PopoverWithMeasuredContent.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/PopoverWithMeasuredContent.tsx b/src/components/PopoverWithMeasuredContent.tsx index 7d83d8525b5c..60e0a6699d2c 100644 --- a/src/components/PopoverWithMeasuredContent.tsx +++ b/src/components/PopoverWithMeasuredContent.tsx @@ -1,5 +1,5 @@ import isEqual from 'lodash/isEqual'; -import React, {useMemo, useState} from 'react'; +import React, {useEffect, useMemo, useState} from 'react'; import type {LayoutChangeEvent} from 'react-native'; import {View} from 'react-native'; import usePrevious from '@hooks/usePrevious'; @@ -72,6 +72,14 @@ function PopoverWithMeasuredContent({ const modalId = useMemo(() => ComposerFocusManager.getId(), []); + useEffect(() => { + if (isVisible) { + return; + } + + setIsContentMeasured(false); + }, [isVisible]); + if (!prevIsVisible && isVisible && shouldEnableNewFocusManagement) { ComposerFocusManager.saveFocusState(modalId); } From 6d4e69bd036176b944da5e727a18ea2079272a99 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 28 Mar 2025 10:50:14 +0100 Subject: [PATCH 2/5] add comment --- src/components/PopoverWithMeasuredContent.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/PopoverWithMeasuredContent.tsx b/src/components/PopoverWithMeasuredContent.tsx index 60e0a6699d2c..5f8ca4d0e8dd 100644 --- a/src/components/PopoverWithMeasuredContent.tsx +++ b/src/components/PopoverWithMeasuredContent.tsx @@ -72,6 +72,10 @@ function PopoverWithMeasuredContent({ const modalId = useMemo(() => ComposerFocusManager.getId(), []); + /** + * Reset the content measurement state when the popover becomes invisible. + * This ensures we re-measure the content next time the popover is shown. + */ useEffect(() => { if (isVisible) { return; From bd7311f31504071546b76ca5891d66715a5724f4 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 28 Mar 2025 15:23:41 +0100 Subject: [PATCH 3/5] Refactor PopoverWithMeasuredContent: Simplify content measurement reset logic --- src/components/PopoverWithMeasuredContent.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/PopoverWithMeasuredContent.tsx b/src/components/PopoverWithMeasuredContent.tsx index 5f8ca4d0e8dd..2f5be908c858 100644 --- a/src/components/PopoverWithMeasuredContent.tsx +++ b/src/components/PopoverWithMeasuredContent.tsx @@ -1,5 +1,5 @@ import isEqual from 'lodash/isEqual'; -import React, {useEffect, useMemo, useState} from 'react'; +import React, {useMemo, useState} from 'react'; import type {LayoutChangeEvent} from 'react-native'; import {View} from 'react-native'; import usePrevious from '@hooks/usePrevious'; @@ -72,28 +72,21 @@ function PopoverWithMeasuredContent({ const modalId = useMemo(() => ComposerFocusManager.getId(), []); - /** - * Reset the content measurement state when the popover becomes invisible. - * This ensures we re-measure the content next time the popover is shown. - */ - useEffect(() => { - if (isVisible) { - return; - } - - setIsContentMeasured(false); - }, [isVisible]); - if (!prevIsVisible && isVisible && shouldEnableNewFocusManagement) { ComposerFocusManager.saveFocusState(modalId); } + if (!prevIsVisible && isVisible && isContentMeasured) { + setIsContentMeasured(false); + } + /** * Measure the size of the popover's content. */ const measurePopover = ({nativeEvent}: LayoutChangeEvent) => { setPopoverWidth(nativeEvent.layout.width); setPopoverHeight(nativeEvent.layout.height); + setIsContentMeasured(true); }; From 349690122368775cf62e3f02ed87b296f000148c Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Tue, 1 Apr 2025 18:57:35 +0200 Subject: [PATCH 4/5] clear line --- src/components/PopoverWithMeasuredContent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/PopoverWithMeasuredContent.tsx b/src/components/PopoverWithMeasuredContent.tsx index 2f5be908c858..42211342cdb0 100644 --- a/src/components/PopoverWithMeasuredContent.tsx +++ b/src/components/PopoverWithMeasuredContent.tsx @@ -86,7 +86,6 @@ function PopoverWithMeasuredContent({ const measurePopover = ({nativeEvent}: LayoutChangeEvent) => { setPopoverWidth(nativeEvent.layout.width); setPopoverHeight(nativeEvent.layout.height); - setIsContentMeasured(true); }; From 71ce54d27cb64bc56370bc8870d7bd604773b98a Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 3 Apr 2025 13:51:33 +0200 Subject: [PATCH 5/5] Enhance PopoverWithMeasuredContent to support dynamic vertical positioning based on anchor alignment --- src/components/PopoverWithMeasuredContent.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/PopoverWithMeasuredContent.tsx b/src/components/PopoverWithMeasuredContent.tsx index 42211342cdb0..429aaad7452f 100644 --- a/src/components/PopoverWithMeasuredContent.tsx +++ b/src/components/PopoverWithMeasuredContent.tsx @@ -9,6 +9,7 @@ import ComposerFocusManager from '@libs/ComposerFocusManager'; import PopoverWithMeasuredContentUtils from '@libs/PopoverWithMeasuredContentUtils'; import CONST from '@src/CONST'; import type {AnchorDimensions, AnchorPosition} from '@src/styles'; +import type {PopoverAnchorPosition} from './Modal/types'; import Popover from './Popover'; import type PopoverProps from './Popover/types'; @@ -134,11 +135,18 @@ function PopoverWithMeasuredContent({ anchorDimensions.height, shoudSwitchPositionIfOverflow, ); - const shiftedAnchorPosition = { + const shiftedAnchorPosition: PopoverAnchorPosition = { left: adjustedAnchorPosition.left + horizontalShift, - bottom: windowHeight - (adjustedAnchorPosition.top + popoverHeight) - verticalShift, }; + if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) { + shiftedAnchorPosition.top = adjustedAnchorPosition.top; + } + + if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM) { + shiftedAnchorPosition.bottom = windowHeight - (adjustedAnchorPosition.top + popoverHeight) - verticalShift; + } + return isContentMeasured ? (