Merge pull request #45449 from bernhardoj/fix/44986-emoji-picker-clos…

…ed-immediately-when-open-it-from-context-menu

Fix emoji picker closes when open it from report context menu add reaction button

src/components/EmojiPicker/EmojiPicker.tsx

@@ -13,6 +13,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {AnchorOrigin, EmojiPickerRef, EmojiPopoverAnchor, OnEmojiSelected, OnModalHideValue, OnWillShowPicker} from '@libs/actions/EmojiPickerAction';
 import * as Browser from '@libs/Browser';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
+import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
 import EmojiPickerMenu from './EmojiPickerMenu';
 
@@ -87,19 +88,23 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
 
         const anchorOriginValue = anchorOrigin ?? DEFAULT_ANCHOR_ORIGIN;
 
+        // It's possible that the anchor is inside an active modal (e.g., add emoji reaction in report context menu).
+        // So, we need to get the anchor position first before closing the active modal which will also destroy the anchor.
         calculateAnchorPosition(emojiPopoverAnchor?.current, anchorOriginValue).then((value) => {
-            onWillShow?.();
-            setIsEmojiPickerVisible(true);
-            setEmojiPopoverAnchorPosition({
-                horizontal: value.horizontal,
-                vertical: value.vertical,
+            Modal.close(() => {
+                onWillShow?.();
+                setIsEmojiPickerVisible(true);
+                setEmojiPopoverAnchorPosition({
+                    horizontal: value.horizontal,
+                    vertical: value.vertical,
+                });
+                emojiAnchorDimension.current = {
+                    width: value.width,
+                    height: value.height,
+                };
+                setEmojiPopoverAnchorOrigin(anchorOriginValue);
+                setActiveID(id);
             });
-            emojiAnchorDimension.current = {
-                width: value.width,
-                height: value.height,
-            };
-            setEmojiPopoverAnchorOrigin(anchorOriginValue);
-            setActiveID(id);
         });
     };