1 files changed, 23 insertions, 4 deletions
diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
index 1f4178f7f..ad3bb30ec 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -7,8 +7,8 @@ import {
 } from 'react-native'
 import Picker from '@emoji-mart/react'
 
+import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {atoms as a} from '#/alf'
-import {textInputWebEmitter} from '../TextInput.web'
 
 const HEIGHT_OFFSET = 40
 const WIDTH_OFFSET = 100
@@ -26,22 +26,41 @@ export type Emoji = {
   unified: string
 }
 
+export interface EmojiPickerPosition {
+  top: number
+  left: number
+  right: number
+  bottom: number
+}
+
 export interface EmojiPickerState {
   isOpen: boolean
-  pos: {top: number; left: number; right: number; bottom: number}
+  pos: EmojiPickerPosition
 }
 
 interface IProps {
   state: EmojiPickerState
   close: () => void
+  /**
+   * If `true`, overrides position and ensures picker is pinned to the top of
+   * the target element.
+   */
+  pinToTop?: boolean
 }
 
-export function EmojiPicker({state, close}: IProps) {
+export function EmojiPicker({state, close, pinToTop}: IProps) {
   const {height, width} = useWindowDimensions()
 
   const isShiftDown = React.useRef(false)
 
   const position = React.useMemo(() => {
+    if (pinToTop) {
+      return {
+        top: state.pos.top - PICKER_HEIGHT + HEIGHT_OFFSET - 10,
+        left: state.pos.left,
+      }
+    }
+
     const fitsBelow = state.pos.top + PICKER_HEIGHT < height
     const fitsAbove = PICKER_HEIGHT < state.pos.top
     const placeOnLeft = PICKER_WIDTH < state.pos.left
@@ -64,7 +83,7 @@ export function EmojiPicker({state, close}: IProps) {
           : undefined,
       }
     }
-  }, [state.pos, height, width])
+  }, [state.pos, height, width, pinToTop])
 
   React.useEffect(() => {
     if (!state.isOpen) return