Merge pull request #27231 from samh-nl/fix/issue-25976

fix: use more specific popover anchor
Expensify · Sep 13, 2023 · 7190179 · 7190179
2 parents f9f86ea + 9d23ffb
commit 7190179
Showing 1 changed file with 4 additions and 7 deletions.
diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -42,7 +42,7 @@ const defaultProps = {
 
 function ReportActionItemEmojiReactions(props) {
     const {reactionListRef} = useContext(ReportScreenContext);
-    const popoverReactionListAnchor = useRef(null);
+    const popoverReactionListAnchors = useRef({});
     let totalReactionCount = 0;
 
     // Each emoji is sorted by the oldest timestamp of user reactions so that they will always appear in the same order for everyone
@@ -95,7 +95,7 @@ function ReportActionItemEmojiReactions(props) {
         };
 
         const onReactionListOpen = (event) => {
-            reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID);
+            reactionListRef.current.showReactionList(event, popoverReactionListAnchors.current[reactionEmojiName], reactionEmojiName, props.reportActionID);
         };
 
         return {
@@ -112,10 +112,7 @@ function ReportActionItemEmojiReactions(props) {
 
     return (
         totalReactionCount > 0 && (
-            <View
-                ref={popoverReactionListAnchor}
-                style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}
-            >
+            <View style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}>
                 {_.map(formattedReactions, (reaction) => {
                     if (reaction === null) {
                         return;
@@ -135,7 +132,7 @@ function ReportActionItemEmojiReactions(props) {
                         >
                             <View>
                                 <EmojiReactionBubble
-                                    ref={props.forwardedRef}
+                                    ref={(ref) => (popoverReactionListAnchors.current[reaction.reactionEmojiName] = ref)}
                                     count={reaction.reactionCount}
                                     emojiCodes={reaction.emojiCodes}
                                     onPress={reaction.onPress}