Merge pull request #31184 from s-alves10/fix/issue-31069

[CP Staging] Fix/issue 31069 (cherry picked from commit a6629d4)
Expensify · Nov 10, 2023 · c83ee6d · c83ee6d
1 parent e8263aa
commit c83ee6d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 18 deletions.
diff --git a/patches/react-native-web+0.19.9+003+measureInWindow.patch b/patches/react-native-web+0.19.9+003+measureInWindow.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-native-web/dist/exports/UIManager/index.js b/node_modules/react-native-web/dist/exports/UIManager/index.js
+index 15b71d5..46b9e01 100644
+--- a/node_modules/react-native-web/dist/exports/UIManager/index.js
++++ b/node_modules/react-native-web/dist/exports/UIManager/index.js
+@@ -77,7 +77,7 @@ var UIManager = {
+   measureInWindow(node, callback) {
+     if (node) {
+       setTimeout(() => {
+-        var _getRect2 = getRect(node),
++        var _getRect2 = node.getBoundingClientRect(),
+           height = _getRect2.height,
+           left = _getRect2.left,
+           top = _getRect2.top,
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
@@ -164,7 +164,6 @@ const EmojiPicker = forwardRef((props, ref) => {
             outerStyle={StyleUtils.getOuterModalStyle(windowHeight, props.viewportOffsetTop)}
             innerContainerStyle={styles.popoverInnerContainer}
             avoidKeyboard
-            shouldUseTargetLocation
         >
             <EmojiPickerMenu
                 onEmojiSelected={selectEmoji}

diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -38,7 +38,6 @@ function EmojiPickerButtonDropdown(props) {
             horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
             vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
             shiftVertical: 4,
-            shouldUseTargetLocation: true,
         });
     };
 

diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js
@@ -3,7 +3,6 @@ import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import getClickedTargetLocation from '@libs/getClickedTargetLocation';
 import {computeHorizontalShift, computeVerticalShift} from '@styles/getPopoverWithMeasuredContentStyles';
 import styles from '@styles/styles';
 import CONST from '@src/CONST';
@@ -37,9 +36,6 @@ const propTypes = {
         height: PropTypes.number,
         width: PropTypes.number,
     }),
-
-    /** Whether we should use the target location from anchor element directly */
-    shouldUseTargetLocation: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -55,7 +51,6 @@ const defaultProps = {
         width: 0,
     },
     withoutOverlay: false,
-    shouldUseTargetLocation: false,
 };
 
 /**
@@ -95,9 +90,6 @@ function PopoverWithMeasuredContent(props) {
         setIsContentMeasured(true);
     };
 
-    const {x: horizontal, y: vertical} = props.anchorRef.current ? getClickedTargetLocation(props.anchorRef.current) : {};
-    const clickedTargetLocation = props.anchorRef.current && props.shouldUseTargetLocation ? {horizontal, vertical} : props.anchorPosition;
-
     const adjustedAnchorPosition = useMemo(() => {
         let horizontalConstraint;
         switch (props.anchorAlignment.horizontal) {
@@ -111,18 +103,13 @@ function PopoverWithMeasuredContent(props) {
                 break;
             case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT:
             default:
-                horizontalConstraint = {left: clickedTargetLocation.horizontal};
+                horizontalConstraint = {left: props.anchorPosition.horizontal};
         }
 
         let verticalConstraint;
-        const anchorLocationVertical = clickedTargetLocation.vertical;
-
         switch (props.anchorAlignment.vertical) {
             case CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM:
-                if (!anchorLocationVertical) {
-                    break;
-                }
-                verticalConstraint = {top: anchorLocationVertical - popoverHeight};
+                verticalConstraint = {top: props.anchorPosition.vertical - popoverHeight};
                 break;
             case CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.CENTER:
                 verticalConstraint = {
@@ -138,7 +125,7 @@ function PopoverWithMeasuredContent(props) {
             ...horizontalConstraint,
             ...verticalConstraint,
         };
-    }, [props.anchorPosition, props.anchorAlignment, clickedTargetLocation.vertical, clickedTargetLocation.horizontal, popoverWidth, popoverHeight]);
+    }, [props.anchorPosition, props.anchorAlignment, popoverWidth, popoverHeight]);
 
     const horizontalShift = computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth);
     const verticalShift = computeVerticalShift(adjustedAnchorPosition.top, popoverHeight, windowHeight);