From 4bbbf3b980b6ae99052fdb2c6ce97b783e8e6711 Mon Sep 17 00:00:00 2001
From: dmkt9 <demoskratos9x@gmail.com>
Date: Wed, 2 Jul 2025 20:47:57 +0700
Subject: [PATCH] Fix - Emoji picker aligns to top when navigating with
 keyboard open

---
 src/components/EmojiPicker/EmojiPicker.tsx | 33 ++++++++++++----------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx
index b588d1af7276..2682f7369067 100644
--- a/src/components/EmojiPicker/EmojiPicker.tsx
+++ b/src/components/EmojiPicker/EmojiPicker.tsx
@@ -16,6 +16,7 @@ import {isMobileChrome} from '@libs/Browser';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
 import {close} from '@userActions/Modal';
 import CONST from '@src/CONST';
+import KeyboardUtils from '@src/utils/keyboard';
 import EmojiPickerMenu from './EmojiPickerMenu';
 
 const DEFAULT_ANCHOR_ORIGIN = {
@@ -94,22 +95,24 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
 
         // 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) => {
-            close(() => {
-                onWillShow?.();
-                setIsEmojiPickerVisible(true);
-                setEmojiPopoverAnchorPosition({
-                    horizontal: value.horizontal,
-                    vertical: value.vertical,
+        KeyboardUtils.dismiss().then(() =>
+            calculateAnchorPosition(emojiPopoverAnchor?.current, anchorOriginValue).then((value) => {
+                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);
-            });
-        });
+            }),
+        );
     };
 
     /**