fix(emojis): stop the emoji grid re-scrolling when categories change

The scroll-to-category effect depended on `scrollToCategory`, whose identity
changes with `categories`. Selecting an emoji rebuilds the frequently-used
category, so the effect re-fired and yanked the grid back to the last
nav-clicked category. Key the effect on the `scrollTarget` nonce alone via a
latest-ref, and defer a frame so a freshly-mounted (search → browse) grid has
laid out before scrolling.

Author: oliverlaz

src/plugins/Emojis/components/EmojiGrid.tsx

@@ -52,11 +52,24 @@ export const EmojiGrid = () => {
     [categories],
   );
 
+  // Latest-ref so the scroll effect can key on the `scrollTarget` nonce alone. Depending
+  // on `scrollToCategory` (whose identity changes with `categories`) would re-fire the
+  // scroll on unrelated updates — e.g. selecting an emoji updates frequently-used, which
+  // rebuilds `categories` and would otherwise yank the grid back to the last-scrolled
+  // category.
+  const scrollToCategoryRef = useRef(scrollToCategory);
+  scrollToCategoryRef.current = scrollToCategory;
+
   // Nav clicks (and any consumer) request a scroll via `scrollTarget`; the nonce makes a
-  // repeat request to the same category re-fire.
+  // repeat request to the same category re-fire. Deferred a frame so a freshly-mounted
+  // (search → browse) grid has laid out before we scroll to the requested category.
   useEffect(() => {
-    if (scrollTarget) scrollToCategory(scrollTarget.categoryId);
-  }, [scrollTarget, scrollToCategory]);
+    if (!scrollTarget) return;
+    const frame = requestAnimationFrame(() =>
+      scrollToCategoryRef.current(scrollTarget.categoryId),
+    );
+    return () => cancelAnimationFrame(frame);
+  }, [scrollTarget]);
 
   // Keyboard nav can target a category that virtualization has unmounted; give it the
   // category order + a way to scroll one into view so focus can traverse the whole set.

src/plugins/Emojis/components/__tests__/EmojiGrid.test.tsx

@@ -1,38 +1,47 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-// Capture the Virtuoso scroll callbacks so scroll-spy is testable, and render items
-// synchronously so the browse view's a11y tree is assertable (jsdom has no layout).
+// Capture the Virtuoso scroll callbacks + imperative scroll so scroll-spy and
+// scroll-to-category are testable, and render items synchronously so the browse view's
+// a11y tree is assertable (jsdom has no layout).
 const { virtuoso } = vi.hoisted(() => ({
-  virtuoso: {} as {
+  virtuoso: { scrollToIndex: vi.fn() } as {
     atBottomStateChange?: (atBottom: boolean) => void;
     rangeChanged?: (range: { endIndex: number; startIndex: number }) => void;
+    scrollToIndex: ReturnType<typeof vi.fn>;
   },
 }));
 
-vi.mock('react-virtuoso', () => ({
-  Virtuoso: ({
-    atBottomStateChange,
-    data = [],
-    itemContent,
-    rangeChanged,
-  }: {
-    atBottomStateChange?: (atBottom: boolean) => void;
-    data?: unknown[];
-    itemContent?: (index: number, item: unknown) => React.ReactNode;
-    rangeChanged?: (range: { endIndex: number; startIndex: number }) => void;
-  }) => {
-    virtuoso.atBottomStateChange = atBottomStateChange;
-    virtuoso.rangeChanged = rangeChanged;
-    return (
-      <div>
-        {data.map((item, index) => (
-          <React.Fragment key={index}>{itemContent?.(index, item)}</React.Fragment>
-        ))}
-      </div>
-    );
-  },
-}));
+vi.mock('react-virtuoso', async () => {
+  const { forwardRef, useImperativeHandle } = await import('react');
+  return {
+    Virtuoso: forwardRef(function Virtuoso(
+      {
+        atBottomStateChange,
+        data = [],
+        itemContent,
+        rangeChanged,
+      }: {
+        atBottomStateChange?: (atBottom: boolean) => void;
+        data?: unknown[];
+        itemContent?: (index: number, item: unknown) => React.ReactNode;
+        rangeChanged?: (range: { endIndex: number; startIndex: number }) => void;
+      },
+      ref,
+    ) {
+      virtuoso.atBottomStateChange = atBottomStateChange;
+      virtuoso.rangeChanged = rangeChanged;
+      useImperativeHandle(ref, () => ({ scrollToIndex: virtuoso.scrollToIndex }));
+      return (
+        <div>
+          {data.map((item, index) => (
+            <React.Fragment key={index}>{itemContent?.(index, item)}</React.Fragment>
+          ))}
+        </div>
+      );
+    }),
+  };
+});
 
 const { ctx, preview } = vi.hoisted(() => ({
   ctx: {} as Record<string, unknown>,
@@ -62,7 +71,7 @@ const base = () => ({
   categories: [] as EmojiPickerCategory[],
   isSearching: false,
   resolveNative: (e: { skins: { native: string }[] }) => e.skins[0]?.native ?? '',
-  scrollTarget: null,
+  scrollTarget: null as { categoryId: string; nonce: number } | null,
   searchResults: null,
   selectEmoji: vi.fn(),
   setActiveCategory: vi.fn(),
@@ -116,3 +125,43 @@ describe('EmojiGrid scroll-spy', () => {
     expect(ctx.setActiveCategory).toHaveBeenLastCalledWith('flags');
   });
 });
+
+describe('EmojiGrid scroll-to-category', () => {
+  beforeEach(() => {
+    // Run the scroll's requestAnimationFrame defer synchronously so it's assertable.
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0);
+      return 0;
+    });
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => undefined);
+    virtuoso.scrollToIndex.mockClear();
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('scrolls to a requested category once, and not when categories change', () => {
+    ctx.categories = [
+      { emojis: [emoji('grinning', '😀')], id: 'people', label: 'People' },
+      { emojis: [emoji('checkered_flag', '🏁')], id: 'flags', label: 'Flags' },
+    ];
+    ctx.scrollTarget = { categoryId: 'flags', nonce: 1 };
+    const { rerender } = render(<EmojiGrid />);
+    expect(virtuoso.scrollToIndex).toHaveBeenCalledTimes(1);
+    expect(virtuoso.scrollToIndex).toHaveBeenLastCalledWith({ align: 'start', index: 1 });
+
+    // A categories change (e.g. frequently-used updating after a selection) must NOT
+    // re-fire the scroll — otherwise the grid jumps back to the last-requested category.
+    ctx.categories = [
+      { emojis: [emoji('clock', '🕐')], id: 'frequent', label: 'Frequently used' },
+      ...(ctx.categories as EmojiPickerCategory[]),
+    ];
+    rerender(<EmojiGrid />);
+    expect(virtuoso.scrollToIndex).toHaveBeenCalledTimes(1);
+
+    // A fresh scroll request (new nonce) does scroll again.
+    ctx.scrollTarget = { categoryId: 'flags', nonce: 2 };
+    rerender(<EmojiGrid />);
+    expect(virtuoso.scrollToIndex).toHaveBeenCalledTimes(2);
+  });
+});