Fix autofocusing Emoji reaction picker search (#10599)

src/components/Menu/index.tsx

@@ -98,6 +98,7 @@ export function Outer({
 }: React.PropsWithChildren<{
   showCancel?: boolean
   style?: StyleProp<ViewStyle>
+  onCloseAutoFocus?: (event: Event) => void
 }>) {
   const context = useMenuContext()
   const {_} = useLingui()

src/components/Menu/index.web.tsx

@@ -181,9 +181,13 @@ export function Trigger({
 export function Outer({
   children,
   style,
+  onCloseAutoFocus,
 }: React.PropsWithChildren<{
   showCancel?: boolean
   style?: StyleProp<ViewStyle>
+  onCloseAutoFocus?: React.ComponentProps<
+    typeof DropdownMenu.Content
+  >['onCloseAutoFocus']
 }>) {
   const t = useTheme()
   const {reduceMotionEnabled} = useA11y()
@@ -195,6 +199,7 @@ export function Outer({
         collisionPadding={{left: 5, right: 5, bottom: 5}}
         loop
         aria-label="Test"
+        onCloseAutoFocus={onCloseAutoFocus}
         className="dropdown-menu-transform-origin dropdown-menu-constrain-size">
         <View
           style={[

src/components/dms/EmojiReactionPicker.web.tsx

@@ -68,7 +68,19 @@ function MenuInner({
   return expanded ? (
     <EmojiPicker.Picker keepOpenWhenShiftHeld={false} />
   ) : (
-    <Menu.Outer style={[a.rounded_full]}>
+    <Menu.Outer
+      style={[a.rounded_full]}
+      onCloseAutoFocus={evt => {
+        // If something has already taken focus (e.g. emoji-mart's search
+        // input when swapping to the full picker), don't let Radix restore
+        // focus to the trigger and steal it back.
+        if (
+          document.activeElement &&
+          document.activeElement !== document.body
+        ) {
+          evt.preventDefault()
+        }
+      }}>
       <View style={[a.flex_row, a.gap_xs]}>
         {['❤️', '👍', '😆', '👀', '😢'].map(emoji => {
           const alreadyReacted = hasAlreadyReacted(

src/components/dms/MessageItem.tsx

@@ -217,6 +217,7 @@ let MessageItem = ({
   const avatar =
     profile && moderationOpts ? (
       <Link
+        style={[a.rounded_full]}
         label={l`${createSanitizedDisplayName(profile)}’s avatar`}
         accessibilityHint={l`Opens this profile`}
         to={makeProfileLink({