FunPicker: Keep emoji picker open on select for composition inputs

ts/components/CompositionArea.tsx

@@ -735,7 +735,6 @@ export const CompositionArea = memo(function CompositionArea({
             recentEmojis={recentEmojis}
             emojiSkinToneDefault={emojiSkinToneDefault}
             onEmojiSkinToneDefaultChange={onEmojiSkinToneDefaultChange}
-            closeOnPick
           />
         </div>
       )}

ts/components/CompositionTextArea.tsx

@@ -210,6 +210,7 @@ export function CompositionTextArea({
             open={emojiPickerOpen}
             onOpenChange={handleEmojiPickerOpenChange}
             onSelectEmoji={handleSelectEmoji}
+            closeOnSelect={false}
           >
             <FunEmojiPickerButton i18n={i18n} />
           </FunEmojiPicker>

ts/components/CustomizingPreferredReactionsModal.tsx

@@ -262,6 +262,7 @@ function CustomizingPreferredReactionsModalItem(props: {
         onOpenChange={handleEmojiPickerOpenChange}
         placement="bottom"
         onSelectEmoji={props.onSelectEmoji}
+        closeOnSelect
       >
         {button}
       </FunEmojiPicker>

ts/components/MediaEditor.tsx

@@ -1409,6 +1409,7 @@ export function MediaEditor({
                       onSelectEmoji={handleSelectEmoji}
                       placement="top"
                       theme={ThemeType.dark}
+                      closeOnSelect={false}
                     >
                       <FunEmojiPickerButton i18n={i18n} />
                     </FunEmojiPicker>

ts/components/ProfileEditor.tsx

@@ -492,6 +492,7 @@ export function ProfileEditor({
                   onOpenChange={handleEmojiPickerOpenChange}
                   placement="bottom"
                   onSelectEmoji={handleSelectEmoji}
+                  closeOnSelect
                 >
                   <FunEmojiPickerButton
                     i18n={i18n}

ts/components/StoryViewsNRepliesModal.tsx

@@ -323,6 +323,7 @@ export function StoryViewsNRepliesModal({
                   onSelectEmoji={handleSelectEmoji}
                   placement="top"
                   theme={ThemeType.dark}
+                  closeOnSelect={false}
                 >
                   <FunEmojiPickerButton i18n={i18n} />
                 </FunEmojiPicker>

ts/components/TextStoryCreator.tsx

@@ -493,6 +493,7 @@ export function TextStoryCreator({
                   placement="top"
                   onSelectEmoji={handleSelectEmoji}
                   theme={ThemeType.dark}
+                  closeOnSelect
                 >
                   <FunEmojiPickerButton i18n={i18n} />
                 </FunEmojiPicker>

ts/components/conversation/ReactionPicker.tsx

@@ -155,6 +155,7 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
                 onSelectEmoji={onSelectEmoji}
                 theme={theme}
                 showCustomizePreferredReactionsButton
+                closeOnSelect
               >
                 <Button
                   aria-label={i18n('icu:Reactions--more')}

ts/components/fun/FunEmojiPicker.stories.tsx

@@ -65,6 +65,7 @@ export default {
     theme: undefined,
     onSelectEmoji: action('onSelectEmoji'),
     showCustomizePreferredReactionsButton: false,
+    closeOnSelect: true,
   },
 } satisfies ComponentMeta<TemplateProps>;
 

ts/components/fun/FunEmojiPicker.tsx

@@ -18,6 +18,7 @@ export type FunEmojiPickerProps = Readonly<{
   onSelectEmoji: (emojiSelection: FunEmojiSelection) => void;
   theme?: ThemeType;
   showCustomizePreferredReactionsButton?: boolean;
+  closeOnSelect: boolean;
   children: ReactNode;
 }>;
 
@@ -51,6 +52,7 @@ export const FunEmojiPicker = memo(function FunEmojiPicker(
             showCustomizePreferredReactionsButton={
               props.showCustomizePreferredReactionsButton ?? false
             }
+            closeOnSelect={props.closeOnSelect}
           />
         </FunErrorBoundary>
       </FunPopover>

ts/components/fun/FunPicker.tsx

@@ -74,6 +74,7 @@ export const FunPicker = memo(function FunPicker(
                 onSelectEmoji={props.onSelectEmoji}
                 onClose={handleClose}
                 showCustomizePreferredReactionsButton={false}
+                closeOnSelect={false}
               />
             </FunErrorBoundary>
           </FunTabPanel>

ts/components/fun/base/FunPopover.tsx

@@ -1,7 +1,7 @@
 // Copyright 2025 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 import type { ReactNode } from 'react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import type { Placement } from 'react-aria';
 import { Dialog, Popover } from 'react-aria-components';
 import classNames from 'classnames';
@@ -14,6 +14,18 @@ export type FunPopoverProps = Readonly<{
 }>;
 
 export function FunPopover(props: FunPopoverProps): JSX.Element {
+  const shouldCloseOnInteractOutside = useCallback(
+    (element: Element): boolean => {
+      // Don't close when quill steals focus
+      const match = element.closest('.module-composition-input__input');
+      if (match != null) {
+        return false;
+      }
+      return true;
+    },
+    []
+  );
+
   return (
     <Popover
       data-fun-overlay
@@ -22,6 +34,7 @@ export function FunPopover(props: FunPopoverProps): JSX.Element {
         'dark-theme': props.theme === ThemeType.dark,
       })}
       placement={props.placement}
+      shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
     >
       <Dialog className="FunPopover__Dialog">{props.children}</Dialog>
     </Popover>

ts/components/fun/panels/FunPanelEmojis.tsx

@@ -9,6 +9,7 @@ import {
   OverlayArrow,
   Popover,
 } from 'react-aria-components';
+import type { PressEvent } from 'react-aria';
 import { VisuallyHidden } from 'react-aria';
 import type { LocalizerType } from '../../../types/I18N';
 import { strictAssert } from '../../../util/assert';
@@ -145,12 +146,14 @@ export type FunPanelEmojisProps = Readonly<{
   onSelectEmoji: (emojiSelection: FunEmojiSelection) => void;
   onClose: () => void;
   showCustomizePreferredReactionsButton: boolean;
+  closeOnSelect: boolean;
 }>;
 
 export function FunPanelEmojis({
   onSelectEmoji,
   onClose,
   showCustomizePreferredReactionsButton,
+  closeOnSelect,
 }: FunPanelEmojisProps): JSX.Element {
   const fun = useFunContext();
   const {
@@ -160,14 +163,15 @@ export function FunPanelEmojis({
     selectedEmojisSection,
     onChangeSelectedEmojisSection,
     onOpenCustomizePreferredReactionsModal,
-    recentEmojis,
+    recentEmojis: unstableRecentEmojis,
     onSelectEmoji: onFunSelectEmoji,
   } = fun;
 
   const scrollerRef = useRef<HTMLDivElement>(null);
 
+  // Don't update recent emojis while the emoji panel is open
+  const [recentEmojis] = useState(unstableRecentEmojis);
   const [focusedCellKey, setFocusedCellKey] = useState<CellKey | null>(null);
-
   const [skinTonePopoverOpen, setSkinTonePopoverOpen] = useState(false);
 
   const handleSkinTonePopoverOpenChange = useCallback((open: boolean) => {
@@ -255,13 +259,15 @@ export function FunPanelEmojis({
   );
 
   const handleSelectEmoji = useCallback(
-    (emojiSelection: FunEmojiSelection) => {
+    (emojiSelection: FunEmojiSelection, shouldClose: boolean) => {
       onFunSelectEmoji(emojiSelection);
       onSelectEmoji(emojiSelection);
-      onClose();
+      if (closeOnSelect || shouldClose) {
-      setFocusedCellKey(null);
+        setFocusedCellKey(null);
+        onClose();
+      }
     },
-    [onFunSelectEmoji, onSelectEmoji, onClose]
+    [onFunSelectEmoji, onSelectEmoji, onClose, closeOnSelect]
   );
 
   const handleOpenCustomizePreferredReactionsModal = useCallback(() => {
@@ -478,7 +484,10 @@ type RowProps = Readonly<{
   cells: ReadonlyArray<CellLayoutNode>;
   focusedCellKey: CellKey | null;
   emojiSkinToneDefault: EmojiSkinTone | null;
-  onSelectEmoji: (emojiSelection: FunEmojiSelection) => void;
+  onSelectEmoji: (
+    emojiSelection: FunEmojiSelection,
+    shouldClose: boolean
+  ) => void;
   onEmojiSkinToneDefaultChange: (emojiSkinTone: EmojiSkinTone) => void;
 }>;
 
@@ -517,7 +526,10 @@ type CellProps = Readonly<{
   rowIndex: number;
   isTabbable: boolean;
   emojiSkinToneDefault: EmojiSkinTone | null;
-  onSelectEmoji: (emojiSelection: FunEmojiSelection) => void;
+  onSelectEmoji: (
+    emojiSelection: FunEmojiSelection,
+    shouldClose: boolean
+  ) => void;
   onEmojiSkinToneDefaultChange: (emojiSkinTone: EmojiSkinTone) => void;
 }>;
 
@@ -556,26 +568,32 @@ const Cell = memo(function Cell(props: CellProps): JSX.Element {
     return getEmojiVariantByParentKeyAndSkinTone(emojiParent.key, skinTone);
   }, [emojiParent, skinTone]);
 
-  const handlePress = useCallback(() => {
+  const handlePress = useCallback(
-    if (emojiHasSkinToneVariants && emojiSkinToneDefault == null) {
+    (event: PressEvent) => {
-      setPopoverOpen(true);
+      if (emojiHasSkinToneVariants && emojiSkinToneDefault == null) {
-      return;
+        setPopoverOpen(true);
-    }
+        return;
-
+      }
-    onSelectEmoji({
+      const emojiSelection: FunEmojiSelection = {
-      variantKey: emojiVariant.key,
+        variantKey: emojiVariant.key,
-      parentKey: emojiParent.key,
+        parentKey: emojiParent.key,
-      englishShortName: emojiParent.englishShortNameDefault,
+        englishShortName: emojiParent.englishShortNameDefault,
+        skinTone,
+      };
+      const shouldClose =
+        (event.pointerType === 'keyboard' || event.pointerType === 'virtual') &&
+        !(event.ctrlKey || event.metaKey);
+      onSelectEmoji(emojiSelection, shouldClose);
+    },
+    [
+      emojiHasSkinToneVariants,
+      emojiSkinToneDefault,
+      emojiVariant,
+      emojiParent,
+      onSelectEmoji,
       skinTone,
-    });
+    ]
-  }, [
+  );
-    emojiHasSkinToneVariants,
-    emojiSkinToneDefault,
-    emojiVariant,
-    emojiParent,
-    onSelectEmoji,
-    skinTone,
-  ]);
 
   const handleLongPress = useCallback(() => {
     if (emojiHasSkinToneVariants) {
@@ -601,12 +619,14 @@ const Cell = memo(function Cell(props: CellProps): JSX.Element {
         skinToneSelection
       );
       onEmojiSkinToneDefaultChange(skinToneSelection);
-      onSelectEmoji({
+      const emojiSelection: FunEmojiSelection = {
         variantKey: variant.key,
         parentKey: emojiParent.key,
         englishShortName: emojiParent.englishShortNameDefault,
         skinTone: skinToneSelection,
-      });
+      };
+      const shouldClose = true;
+      onSelectEmoji(emojiSelection, shouldClose);
     },
     [
       onEmojiSkinToneDefaultChange,

ts/components/fun/panels/FunPanelGifs.tsx

@@ -359,9 +359,9 @@ export function FunPanelGifs({
     (_event: PressEvent, gifSelection: FunGifSelection) => {
       onFunSelectGif(gifSelection);
       onSelectGif(gifSelection);
+      setSelectedItemKey(null);
       // Should always close, cannot select multiple
       onClose();
-      setSelectedItemKey(null);
     },
     [onFunSelectGif, onSelectGif, onClose]
   );

ts/components/fun/panels/FunPanelStickers.tsx

@@ -344,8 +344,8 @@ export function FunPanelStickers({
       onFunSelectSticker(stickerSelection);
       onSelectSticker(stickerSelection);
       if (!(event.ctrlKey || event.metaKey)) {
-        onClose();
         setFocusedCellKey(null);
+        onClose();
       }
     },
     [onFunSelectSticker, onSelectSticker, onClose]