From 20fa7feefed8ed4e168233f319997ceab4151c78 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 20 Dec 2024 10:09:37 -0600
Subject: [PATCH 1/7] Only portal the emoji picker where needed

---
 .../Messages/components/MessagesList.tsx      | 15 ++--
 .../text-input/web/EmojiPicker.web.tsx        | 71 +++++++++----------
 2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx
index ce189459e9..4864fd099a 100644
--- a/src/screens/Messages/components/MessagesList.tsx
+++ b/src/screens/Messages/components/MessagesList.tsx
@@ -38,6 +38,7 @@ import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {Loader} from '#/components/Loader'
+import {Portal} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 import {MessageInputEmbed, useMessageEmbed} from './MessageInputEmbed'
 
@@ -448,11 +449,15 @@ export function MessagesList({
       </Animated.View>
 
       {isWeb && (
-        <EmojiPicker
-          pinToTop
-          state={emojiPickerState}
-          close={() => setEmojiPickerState(prev => ({...prev, isOpen: false}))}
-        />
+        <Portal>
+          <EmojiPicker
+            pinToTop
+            state={emojiPickerState}
+            close={() =>
+              setEmojiPickerState(prev => ({...prev, isOpen: false}))
+            }
+          />
+        </Portal>
       )}
 
       {newMessagesPill.show && <NewMessagesPill onPress={scrollToEndOnPress} />}
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 c721729020..1d5dad4861 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -10,7 +10,6 @@ import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {atoms as a} from '#/alf'
-import {Portal} from '#/components/Portal'
 
 const HEIGHT_OFFSET = 40
 const WIDTH_OFFSET = 100
@@ -126,41 +125,39 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
   }
 
   return (
-    <Portal>
-      <TouchableWithoutFeedback
-        accessibilityRole="button"
-        onPress={onPressBackdrop}
-        accessibilityViewIsModal>
-        <View
-          style={[
-            a.fixed,
-            a.w_full,
-            a.h_full,
-            a.align_center,
-            {
-              top: 0,
-              left: 0,
-              right: 0,
-            },
-          ]}>
-          {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-            <View style={[{position: 'absolute'}, position]}>
-              <DismissableLayer
-                onFocusOutside={evt => evt.preventDefault()}
-                onDismiss={close}>
-                <Picker
-                  data={async () => {
-                    return (await import('./EmojiPickerData.json')).default
-                  }}
-                  onEmojiSelect={onInsert}
-                  autoFocus={true}
-                />
-              </DismissableLayer>
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
-    </Portal>
+    <TouchableWithoutFeedback
+      accessibilityRole="button"
+      onPress={onPressBackdrop}
+      accessibilityViewIsModal>
+      <View
+        style={[
+          a.fixed,
+          a.w_full,
+          a.h_full,
+          a.align_center,
+          {
+            top: 0,
+            left: 0,
+            right: 0,
+          },
+        ]}>
+        {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
+        <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+          <View style={[{position: 'absolute'}, position]}>
+            <DismissableLayer
+              onFocusOutside={evt => evt.preventDefault()}
+              onDismiss={close}>
+              <Picker
+                data={async () => {
+                  return (await import('./EmojiPickerData.json')).default
+                }}
+                onEmojiSelect={onInsert}
+                autoFocus={true}
+              />
+            </DismissableLayer>
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+    </TouchableWithoutFeedback>
   )
 }

From 03eb1d2368050b067d5578c9f5c8d3cf1e4c46f9 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 20 Dec 2024 10:11:52 -0600
Subject: [PATCH 2/7] Add optional portal prop to emoji picker

---
 src/screens/Messages/components/MessagesList.tsx | 16 ++++++----------
 .../composer/text-input/web/EmojiPicker.web.tsx  | 11 +++++++++--
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx
index 4864fd099a..6299e96d59 100644
--- a/src/screens/Messages/components/MessagesList.tsx
+++ b/src/screens/Messages/components/MessagesList.tsx
@@ -38,7 +38,6 @@ import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {Loader} from '#/components/Loader'
-import {Portal} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 import {MessageInputEmbed, useMessageEmbed} from './MessageInputEmbed'
 
@@ -449,15 +448,12 @@ export function MessagesList({
       </Animated.View>
 
       {isWeb && (
-        <Portal>
-          <EmojiPicker
-            pinToTop
-            state={emojiPickerState}
-            close={() =>
-              setEmojiPickerState(prev => ({...prev, isOpen: false}))
-            }
-          />
-        </Portal>
+        <EmojiPicker
+          portal
+          pinToTop
+          state={emojiPickerState}
+          close={() => setEmojiPickerState(prev => ({...prev, isOpen: false}))}
+        />
       )}
 
       {newMessagesPill.show && <NewMessagesPill onPress={scrollToEndOnPress} />}
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 1d5dad4861..9c036757ed 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -10,6 +10,7 @@ import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {atoms as a} from '#/alf'
+import {Portal} from '#/components/Portal'
 
 const HEIGHT_OFFSET = 40
 const WIDTH_OFFSET = 100
@@ -47,9 +48,14 @@ interface IProps {
    * the target element.
    */
   pinToTop?: boolean
+  /**
+   * If `true`, renders the picker in a portal at the document root. Useful if
+   * the positioning is getting wacky due to other wrapping elements.
+   */
+  portal?: boolean
 }
 
-export function EmojiPicker({state, close, pinToTop}: IProps) {
+export function EmojiPicker({state, close, pinToTop, portal}: IProps) {
   const {height, width} = useWindowDimensions()
 
   const isShiftDown = React.useRef(false)
@@ -124,7 +130,7 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
     close()
   }
 
-  return (
+  const picker = (
     <TouchableWithoutFeedback
       accessibilityRole="button"
       onPress={onPressBackdrop}
@@ -160,4 +166,5 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
       </View>
     </TouchableWithoutFeedback>
   )
+  return portal ? <Portal>{picker}</Portal> : picker
 }

From 07e2fbf45862f906be12b0aa9d82d6eb9a3a70fb Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 20 Dec 2024 10:32:32 -0600
Subject: [PATCH 3/7] Use FocusScope to our advantage

---
 .../Messages/components/MessagesList.tsx      |  1 -
 .../text-input/web/EmojiPicker.web.tsx        | 79 +++++++++----------
 2 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx
index 6299e96d59..ce189459e9 100644
--- a/src/screens/Messages/components/MessagesList.tsx
+++ b/src/screens/Messages/components/MessagesList.tsx
@@ -449,7 +449,6 @@ export function MessagesList({
 
       {isWeb && (
         <EmojiPicker
-          portal
           pinToTop
           state={emojiPickerState}
           close={() => setEmojiPickerState(prev => ({...prev, isOpen: false}))}
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 9c036757ed..954a2d1e45 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -7,6 +7,7 @@ import {
 } from 'react-native'
 import Picker from '@emoji-mart/react'
 import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
+import {FocusScope} from '@radix-ui/react-focus-scope'
 
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {atoms as a} from '#/alf'
@@ -48,14 +49,9 @@ interface IProps {
    * the target element.
    */
   pinToTop?: boolean
-  /**
-   * If `true`, renders the picker in a portal at the document root. Useful if
-   * the positioning is getting wacky due to other wrapping elements.
-   */
-  portal?: boolean
 }
 
-export function EmojiPicker({state, close, pinToTop, portal}: IProps) {
+export function EmojiPicker({state, close, pinToTop}: IProps) {
   const {height, width} = useWindowDimensions()
 
   const isShiftDown = React.useRef(false)
@@ -130,41 +126,44 @@ export function EmojiPicker({state, close, pinToTop, portal}: IProps) {
     close()
   }
 
-  const picker = (
-    <TouchableWithoutFeedback
-      accessibilityRole="button"
-      onPress={onPressBackdrop}
-      accessibilityViewIsModal>
-      <View
-        style={[
-          a.fixed,
-          a.w_full,
-          a.h_full,
-          a.align_center,
-          {
-            top: 0,
-            left: 0,
-            right: 0,
-          },
-        ]}>
-        {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
-        <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-          <View style={[{position: 'absolute'}, position]}>
-            <DismissableLayer
-              onFocusOutside={evt => evt.preventDefault()}
-              onDismiss={close}>
-              <Picker
-                data={async () => {
-                  return (await import('./EmojiPickerData.json')).default
-                }}
-                onEmojiSelect={onInsert}
-                autoFocus={true}
-              />
-            </DismissableLayer>
+  return (
+    <Portal>
+      <FocusScope loop asChild trapped>
+        <TouchableWithoutFeedback
+          accessibilityRole="button"
+          onPress={onPressBackdrop}
+          accessibilityViewIsModal>
+          <View
+            style={[
+              a.fixed,
+              a.w_full,
+              a.h_full,
+              a.align_center,
+              {
+                top: 0,
+                left: 0,
+                right: 0,
+              },
+            ]}>
+            {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
+            <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+              <View style={[{position: 'absolute'}, position]}>
+                <DismissableLayer
+                  onFocusOutside={evt => evt.preventDefault()}
+                  onDismiss={close}>
+                  <Picker
+                    data={async () => {
+                      return (await import('./EmojiPickerData.json')).default
+                    }}
+                    onEmojiSelect={onInsert}
+                    autoFocus={true}
+                  />
+                </DismissableLayer>
+              </View>
+            </TouchableWithoutFeedback>
           </View>
         </TouchableWithoutFeedback>
-      </View>
-    </TouchableWithoutFeedback>
+      </FocusScope>
+    </Portal>
   )
-  return portal ? <Portal>{picker}</Portal> : picker
 }

From 8da2234e17690e11be782e0638d4326c70ed6864 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 20 Dec 2024 11:12:17 -0600
Subject: [PATCH 4/7] Pare back, add guards, fix focus trap

---
 .../text-input/web/EmojiPicker.web.tsx        | 95 ++++++++++---------
 1 file changed, 48 insertions(+), 47 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 954a2d1e45..4ea74f6bbc 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -1,16 +1,13 @@
 import React from 'react'
-import {
-  GestureResponderEvent,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native'
+import {Pressable, useWindowDimensions, View} from 'react-native'
 import Picker from '@emoji-mart/react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 import {FocusScope} from '@radix-ui/react-focus-scope'
 
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
-import {atoms as a} from '#/alf'
+import {atoms as a, flatten} from '#/alf'
 import {Portal} from '#/components/Portal'
 
 const HEIGHT_OFFSET = 40
@@ -52,6 +49,7 @@ interface IProps {
 }
 
 export function EmojiPicker({state, close, pinToTop}: IProps) {
+  const {_} = useLingui()
   const {height, width} = useWindowDimensions()
 
   const isShiftDown = React.useRef(false)
@@ -120,49 +118,52 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
 
   if (!state.isOpen) return null
 
-  const onPressBackdrop = (e: GestureResponderEvent) => {
-    // @ts-ignore web only
-    if (e.nativeEvent?.pointerId === -1) return
-    close()
-  }
-
   return (
     <Portal>
-      <FocusScope loop asChild trapped>
-        <TouchableWithoutFeedback
-          accessibilityRole="button"
-          onPress={onPressBackdrop}
-          accessibilityViewIsModal>
-          <View
-            style={[
-              a.fixed,
-              a.w_full,
-              a.h_full,
-              a.align_center,
-              {
-                top: 0,
-                left: 0,
-                right: 0,
-              },
-            ]}>
-            {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
-            <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-              <View style={[{position: 'absolute'}, position]}>
-                <DismissableLayer
-                  onFocusOutside={evt => evt.preventDefault()}
-                  onDismiss={close}>
-                  <Picker
-                    data={async () => {
-                      return (await import('./EmojiPickerData.json')).default
-                    }}
-                    onEmojiSelect={onInsert}
-                    autoFocus={true}
-                  />
-                </DismissableLayer>
-              </View>
-            </TouchableWithoutFeedback>
+      <FocusScope loop trapped>
+        <Pressable
+          accessible
+          accessibilityLabel={_(msg`Close emoji picker`)}
+          accessibilityHint={_(msg`Tap to close the emoji picker`)}
+          onPress={close}
+          style={[a.fixed, a.inset_0]}
+        />
+
+        <View
+          style={flatten([
+            a.fixed,
+            a.w_full,
+            a.h_full,
+            a.align_center,
+            a.z_10,
+            {
+              top: 0,
+              left: 0,
+              right: 0,
+            },
+          ])}>
+          <View style={[{position: 'absolute'}, position]}>
+            <DismissableLayer
+              onFocusOutside={evt => evt.preventDefault()}
+              onDismiss={close}>
+              <Picker
+                data={async () => {
+                  return (await import('./EmojiPickerData.json')).default
+                }}
+                onEmojiSelect={onInsert}
+                autoFocus={true}
+              />
+            </DismissableLayer>
           </View>
-        </TouchableWithoutFeedback>
+        </View>
+
+        <Pressable
+          accessible
+          accessibilityLabel={_(msg`Close emoji picker`)}
+          accessibilityHint={_(msg`Tap to close the emoji picker`)}
+          onPress={close}
+          style={[a.fixed, a.inset_0]}
+        />
       </FocusScope>
     </Portal>
   )

From 3fe55d8f6f6e95f5280116efc080da0e0d83f533 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 20 Dec 2024 11:33:38 -0600
Subject: [PATCH 5/7] Don't return focus to emoji button

---
 src/view/com/composer/text-input/web/EmojiPicker.web.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 4ea74f6bbc..93301a68c0 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -120,7 +120,7 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
 
   return (
     <Portal>
-      <FocusScope loop trapped>
+      <FocusScope loop trapped onUnmountAutoFocus={e => e.preventDefault()}>
         <Pressable
           accessible
           accessibilityLabel={_(msg`Close emoji picker`)}

From 459998f1e8550661e1c7d13b8ae4d800d462a143 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 20 Dec 2024 18:42:43 +0000
Subject: [PATCH 6/7] Set DM input position on emoji insert

---
 .../Messages/components/MessageInput.web.tsx  | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/screens/Messages/components/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx
index 72e0382a93..5ac738ad51 100644
--- a/src/screens/Messages/components/MessageInput.web.tsx
+++ b/src/screens/Messages/components/MessageInput.web.tsx
@@ -3,6 +3,7 @@ import {Pressable, StyleSheet, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import Graphemer from 'graphemer'
+import {flushSync} from 'react-dom'
 import TextareaAutosize from 'react-textarea-autosize'
 
 import {isSafari, isTouchDevice} from '#/lib/browser'
@@ -106,11 +107,19 @@ export function MessageInput({
 
   const onEmojiInserted = React.useCallback(
     (emoji: Emoji) => {
-      const position = textAreaRef.current?.selectionStart ?? 0
-      setMessage(
-        message =>
-          message.slice(0, position) + emoji.native + message.slice(position),
-      )
+      if (!textAreaRef.current) {
+        return
+      }
+      const position = textAreaRef.current.selectionStart ?? 0
+      textAreaRef.current.focus()
+      flushSync(() => {
+        setMessage(
+          message =>
+            message.slice(0, position) + emoji.native + message.slice(position),
+        )
+      })
+      textAreaRef.current.selectionStart = position + emoji.native.length
+      textAreaRef.current.selectionEnd = position + emoji.native.length
     },
     [setMessage],
   )

From e6888847ef49f32e1db798ce9c8d28cf063c2b02 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 20 Dec 2024 19:40:53 +0000
Subject: [PATCH 7/7] Let the caller determine next focus node

---
 .../Messages/components/MessageInput.web.tsx  |  9 ++++++++-
 .../Messages/components/MessagesList.tsx      |  2 +-
 src/state/shell/composer/index.tsx            |  3 ++-
 src/view/com/composer/Composer.tsx            |  9 ++++++++-
 .../text-input/web/EmojiPicker.web.tsx        | 13 +++++++++++-
 src/view/shell/Composer.web.tsx               | 20 +++++++++++--------
 6 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/screens/Messages/components/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx
index 5ac738ad51..bac163685a 100644
--- a/src/screens/Messages/components/MessageInput.web.tsx
+++ b/src/screens/Messages/components/MessageInput.web.tsx
@@ -157,7 +157,14 @@ export function MessageInput({
         <Button
           onPress={e => {
             e.currentTarget.measure((_fx, _fy, _width, _height, px, py) => {
-              openEmojiPicker?.({top: py, left: px, right: px, bottom: py})
+              openEmojiPicker?.({
+                top: py,
+                left: px,
+                right: px,
+                bottom: py,
+                nextFocusRef:
+                  textAreaRef as unknown as React.MutableRefObject<HTMLElement>,
+              })
             })
           }}
           style={[
diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx
index ce189459e9..071ce1cd71 100644
--- a/src/screens/Messages/components/MessagesList.tsx
+++ b/src/screens/Messages/components/MessagesList.tsx
@@ -101,7 +101,7 @@ export function MessagesList({
   const [emojiPickerState, setEmojiPickerState] =
     React.useState<EmojiPickerState>({
       isOpen: false,
-      pos: {top: 0, left: 0, right: 0, bottom: 0},
+      pos: {top: 0, left: 0, right: 0, bottom: 0, nextFocusRef: null},
     })
 
   // We need to keep track of when the scroll offset is at the bottom of the list to know when to scroll as new items
diff --git a/src/state/shell/composer/index.tsx b/src/state/shell/composer/index.tsx
index 7138945f49..f1ea41c640 100644
--- a/src/state/shell/composer/index.tsx
+++ b/src/state/shell/composer/index.tsx
@@ -13,6 +13,7 @@ import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {postUriToRelativePath, toBskyAppUrl} from '#/lib/strings/url-helpers'
 import {purgeTemporaryImageFiles} from '#/state/gallery'
 import {precacheResolveLinkQuery} from '#/state/queries/resolve-link'
+import type {EmojiPickerPosition} from '#/view/com/composer/text-input/web/EmojiPicker.web'
 import * as Toast from '#/view/com/util/Toast'
 
 export interface ComposerOptsPostRef {
@@ -29,7 +30,7 @@ export interface ComposerOpts {
   onPost?: (postUri: string | undefined) => void
   quote?: AppBskyFeedDefs.PostView
   mention?: string // handle of user to mention
-  openEmojiPicker?: (pos: DOMRect | undefined) => void
+  openEmojiPicker?: (pos: EmojiPickerPosition | undefined) => void
   text?: string
   imageUris?: {uri: string; width: number; height: number; altText?: string}[]
   videoUri?: {uri: string; width: number; height: number}
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index e4b09cf0f8..c9e40530e5 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -530,7 +530,14 @@ export const ComposePost = ({
   }
 
   const onEmojiButtonPress = useCallback(() => {
-    openEmojiPicker?.(textInput.current?.getCursorPosition())
+    const rect = textInput.current?.getCursorPosition()
+    if (rect) {
+      openEmojiPicker?.({
+        ...rect,
+        nextFocusRef:
+          textInput as unknown as React.MutableRefObject<HTMLElement>,
+      })
+    }
   }, [openEmojiPicker])
 
   const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
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 93301a68c0..f5e6a987cb 100644
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -31,6 +31,7 @@ export interface EmojiPickerPosition {
   left: number
   right: number
   bottom: number
+  nextFocusRef: React.MutableRefObject<HTMLElement> | null
 }
 
 export interface EmojiPickerState {
@@ -120,7 +121,17 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
 
   return (
     <Portal>
-      <FocusScope loop trapped onUnmountAutoFocus={e => e.preventDefault()}>
+      <FocusScope
+        loop
+        trapped
+        onUnmountAutoFocus={e => {
+          const nextFocusRef = state.pos.nextFocusRef
+          const node = nextFocusRef?.current
+          if (node) {
+            e.preventDefault()
+            node.focus()
+          }
+        }}>
         <Pressable
           accessible
           accessibilityLabel={_(msg`Close emoji picker`)}
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index 47a86ed248..cfd9f62802 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -9,6 +9,7 @@ import {useModals} from '#/state/modals'
 import {ComposerOpts, useComposerState} from '#/state/shell/composer'
 import {
   EmojiPicker,
+  EmojiPickerPosition,
   EmojiPickerState,
 } from '#/view/com/composer/text-input/web/EmojiPicker.web'
 import {useBreakpoints, useTheme} from '#/alf'
@@ -42,16 +43,19 @@ function Inner({state}: {state: ComposerOpts}) {
   const {gtMobile} = useBreakpoints()
   const [pickerState, setPickerState] = React.useState<EmojiPickerState>({
     isOpen: false,
-    pos: {top: 0, left: 0, right: 0, bottom: 0},
+    pos: {top: 0, left: 0, right: 0, bottom: 0, nextFocusRef: null},
   })
 
-  const onOpenPicker = React.useCallback((pos: DOMRect | undefined) => {
-    if (!pos) return
-    setPickerState({
-      isOpen: true,
-      pos,
-    })
-  }, [])
+  const onOpenPicker = React.useCallback(
+    (pos: EmojiPickerPosition | undefined) => {
+      if (!pos) return
+      setPickerState({
+        isOpen: true,
+        pos,
+      })
+    },
+    [],
+  )
 
   const onClosePicker = React.useCallback(() => {
     setPickerState(prev => ({