fix(emojis): correct three picker option/state bugs

- Text-composer middleware: spread options into a fresh object instead of
  mutating the shared DEFAULT_OPTIONS, so options no longer leak between
  createTextComposerEmojiMiddleware() calls — the no-arg default path kept the
  wrong trigger/minChars after any earlier customized call.
- EmojiPicker: record a "frequently used" emoji only after confirming there is a
  textarea to insert into, so a no-op selection isn't tracked as used.
- useFrequentlyUsedEmoji: build each update from a latest-value ref so two
  selections in one tick both survive instead of the second dropping the first.

Author: oliverlaz

src/plugins/Emojis/EmojiPicker.tsx

@@ -164,9 +164,10 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
               referenceElement?.focus();
             }}
             onEmojiSelect={(emoji) => {
-              recordUse(emoji.id);
               const textarea = textareaRef.current;
               if (!textarea) return;
+              // Record only once we know the emoji is actually being inserted.
+              recordUse(emoji.id);
               textComposer.insertText({ text: emoji.native });
               textarea.focus();
               if (props.closeOnEmojiSelect) {

src/plugins/Emojis/__tests__/EmojiPicker.test.tsx

@@ -33,10 +33,13 @@ vi.mock('../components', () => ({
   ),
 }));
 
+// Mutable so a test can simulate "no textarea to insert into" (textareaRef.current null).
+const { textareaRef } = vi.hoisted(() => ({
+  textareaRef: { current: null as HTMLTextAreaElement | null },
+}));
+
 vi.mock('../../../context', () => ({
-  useMessageComposerContext: () => ({
-    textareaRef: { current: document.createElement('textarea') },
-  }),
+  useMessageComposerContext: () => ({ textareaRef }),
   useTranslationContext: () => ({ t: (key: string) => key }),
 }));
 
@@ -81,6 +84,10 @@ import { EmojiPicker } from '../EmojiPicker';
 
 const openPicker = () => fireEvent.click(screen.getByLabelText('aria/Emoji picker'));
 
+beforeEach(() => {
+  textareaRef.current = document.createElement('textarea');
+});
+
 describe('EmojiPicker session state', () => {
   it('keeps skin tone and frequently-used across close and reopen (incl. closeOnEmojiSelect)', () => {
     render(<EmojiPicker closeOnEmojiSelect />);
@@ -102,6 +109,18 @@ describe('EmojiPicker session state', () => {
     expect(screen.getByTestId('skin-tone')).toHaveTextContent('4');
     expect(screen.getByTestId('frequently-used')).toHaveTextContent('rocket');
   });
+
+  it('does not record a frequently-used emoji when there is no textarea to insert into', () => {
+    textareaRef.current = null;
+    render(<EmojiPicker />);
+
+    openPicker();
+    expect(screen.getByTestId('frequently-used').textContent).toBe('');
+
+    // Selecting can't insert (no textarea), so it must not be recorded as "used".
+    fireEvent.click(screen.getByText('select-rocket'));
+    expect(screen.getByTestId('frequently-used').textContent).toBe('');
+  });
 });
 
 describe('EmojiPicker pickerProps', () => {

src/plugins/Emojis/hooks/__tests__/useFrequentlyUsedEmoji.test.ts

@@ -23,4 +23,27 @@ describe('useFrequentlyUsedEmoji', () => {
     rerender({ frequentlyUsedEmoji: ['y', 'x'] });
     expect(result.current.frequentlyUsedIds).toEqual(['y', 'x']);
   });
+
+  it('keeps both when two emoji are recorded before a re-render (uncontrolled)', () => {
+    const { result } = renderHook(() => useFrequentlyUsedEmoji({}));
+    // Two selects in the same tick close over the same list — the second must still
+    // build on the first, not overwrite it.
+    act(() => {
+      result.current.recordUse('a');
+      result.current.recordUse('b');
+    });
+    expect(result.current.frequentlyUsedIds).toEqual(['b', 'a']);
+  });
+
+  it('accumulates both when two emoji are recorded before a re-render (controlled)', () => {
+    const onFrequentlyUsedChange = vi.fn();
+    const { result } = renderHook(() =>
+      useFrequentlyUsedEmoji({ frequentlyUsedEmoji: [], onFrequentlyUsedChange }),
+    );
+    act(() => {
+      result.current.recordUse('a');
+      result.current.recordUse('b');
+    });
+    expect(onFrequentlyUsedChange).toHaveBeenLastCalledWith(['b', 'a']);
+  });
 });

src/plugins/Emojis/hooks/useFrequentlyUsedEmoji.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 export type UseFrequentlyUsedEmojiParams = {
   /** Controlled ordered list of recently used emoji ids (most recent first). */
@@ -23,16 +23,23 @@ export const useFrequentlyUsedEmoji = ({
   const isControlled = Array.isArray(frequentlyUsedEmoji);
   const frequentlyUsedIds = isControlled ? frequentlyUsedEmoji : internal;
 
+  // Mirror the current list into a ref so several recordUse calls fired before a
+  // re-render each build on the previous result rather than a stale closure/prop
+  // (otherwise the second synchronous select would drop the first).
+  const latestRef = useRef(frequentlyUsedIds);
+  latestRef.current = frequentlyUsedIds;
+
   const recordUse = useCallback(
     (emojiId: string) => {
       const next = [
         emojiId,
-        ...frequentlyUsedIds.filter((existing) => existing !== emojiId),
+        ...latestRef.current.filter((existing) => existing !== emojiId),
       ].slice(0, MAX_FREQUENTLY_USED);
+      latestRef.current = next;
       if (!isControlled) setInternal(next);
       onFrequentlyUsedChange?.(next);
     },
-    [frequentlyUsedIds, isControlled, onFrequentlyUsedChange],
+    [isControlled, onFrequentlyUsedChange],
   );
 
   return { frequentlyUsedIds, recordUse };

src/plugins/Emojis/middleware/__tests__/textComposerEmojiMiddleware.test.ts

@@ -82,4 +82,21 @@ describe('createTextComposerEmojiMiddleware', () => {
     expect(search).toHaveBeenCalled();
     expect(items[0]?.id).toBe('custom');
   });
+
+  it('does not leak options between calls (shared defaults are not mutated)', async () => {
+    // A call that overrides options must not change the defaults a later no-arg call
+    // sees. Previously `mergeWith(DEFAULT_OPTIONS, options)` mutated the shared constant.
+    createTextComposerEmojiMiddleware(undefined, { minChars: 3, trigger: ';' });
+
+    const withDefaults = createTextComposerEmojiMiddleware();
+    const { output } = await runOnChange(withDefaults, {
+      selection: { end: 4, start: 4 },
+      suggestions: undefined,
+      text: ':smi',
+    });
+
+    // Still the default ':' trigger — not the ';' leaked from the earlier call.
+    expect(output?.suggestions?.trigger).toBe(':');
+    expect(output?.suggestions?.query).toBe('smi');
+  });
 });

src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts

@@ -1,4 +1,3 @@
-import mergeWith from 'lodash.mergewith';
 import type {
   Middleware,
   SearchSourceOptions,
@@ -100,7 +99,9 @@ export const createTextComposerEmojiMiddleware = (
   emojiSearchIndex: EmojiSearchIndex = defaultEmojiSearchIndex,
   options?: Partial<TextComposerMiddlewareOptions>,
 ): EmojiMiddleware => {
-  const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});
+  // Spread into a fresh object — never mutate the shared module-level DEFAULT_OPTIONS
+  // (options are flat, so a shallow merge is exact).
+  const finalOptions = { ...DEFAULT_OPTIONS, ...options };
   const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
   emojiSearchSource.activate();