fix: prevent emoji autocomplete selection crash

.changeset/fix-emoji-autocomplete-focus.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix a crash when emoji autocomplete results reappear while typing.

src/app/components/editor/autocomplete/AutocompleteMenu.tsx

@@ -44,6 +44,7 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
         active={isActive}
         focusTrapOptions={{
           initialFocus: false,
+          fallbackFocus: () => itemsRef.current!,
           onPostDeactivate: handleDeactivate,
           returnFocusOnDeactivate: false,
           clickOutsideDeactivates: true,
@@ -61,7 +62,7 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
             {headerContent}
           </Header>
           <Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
-            <div ref={itemsRef} style={{ padding: config.space.S200 }}>
+            <div ref={itemsRef} tabIndex={-1} style={{ padding: config.space.S200 }}>
               {children}
             </div>
           </Scroll>

src/app/components/editor/autocomplete/EmoticonAutocomplete.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { IEmoji } from '$plugins/emoji';
+import type {
+  EditorAutocompleteQuery,
+  ProseMirrorEditorController,
+} from '../prosemirrorController';
+import { EmoticonAutocomplete } from './EmoticonAutocomplete';
+
+let searchResult: { items: IEmoji[] } | undefined;
+const mocks = vi.hoisted(() => ({
+  reset: vi.fn<() => void>(),
+  search: vi.fn<(query: string) => void>(),
+}));
+
+vi.mock('$hooks/useMatrixClient', () => ({ useMatrixClient: () => ({}) }));
+vi.mock('$hooks/useMediaAuthentication', () => ({ useMediaAuthentication: () => false }));
+vi.mock('$hooks/useImagePacks', () => ({ useRelevantImagePacks: () => [] }));
+vi.mock('$hooks/useRecentEmoji', () => ({ useRecentEmoji: () => [] }));
+vi.mock('$hooks/useAsyncSearch', () => ({
+  useAsyncSearch: () => [searchResult, mocks.search, mocks.reset],
+}));
+vi.mock('$hooks/useKeyDown', () => ({ useKeyDown: () => undefined }));
+vi.mock('$state/hooks/settings', () => ({ useSetting: () => [2] }));
+vi.mock('$utils/matrix', () => ({ mxcUrlToHttp: () => undefined }));
+
+const query: EditorAutocompleteQuery<string> = {
+  from: 1,
+  prefix: ':',
+  text: 'zxy',
+  to: 4,
+};
+
+const emoji = { shortcode: 'zxy-face', unicode: 'Z' } as IEmoji;
+
+describe('EmoticonAutocomplete', () => {
+  afterEach(() => {
+    searchResult = undefined;
+  });
+
+  it('keeps the menu mounted while results change from none to matches', () => {
+    searchResult = { items: [] };
+    const requestClose = vi.fn<() => void>();
+    const { rerender } = render(
+      <EmoticonAutocomplete
+        controller={{} as ProseMirrorEditorController}
+        imagePackRooms={[]}
+        query={query}
+        requestClose={requestClose}
+      />
+    );
+    const menu = document.querySelector('[data-autocomplete-menu]')!;
+
+    expect(screen.getByText('No emojis found')).toBeInTheDocument();
+
+    searchResult = { items: [emoji] };
+    rerender(
+      <EmoticonAutocomplete
+        controller={{} as ProseMirrorEditorController}
+        imagePackRooms={[]}
+        query={{ ...query, text: 'zx' }}
+        requestClose={requestClose}
+      />
+    );
+
+    expect(menu).toBeInTheDocument();
+    expect(screen.getByText(':zxy-face:')).toBeInTheDocument();
+  });
+});

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -105,57 +105,61 @@ export function EmoticonAutocomplete({
     });
   });
 
-  return autoCompleteEmoticon.length === 0 ? null : (
+  return (
     <AutocompleteMenu
       headerContent={<Text size="L400">{title ?? 'Emojis'}</Text>}
       requestClose={requestClose}
     >
-      {autoCompleteEmoticon.map((emoticon) => {
-        const isCustomEmoji = 'url' in emoticon;
-        const key = isCustomEmoji ? emoticon.url : emoticon.unicode;
-        const customEmojiUrl = mxcUrlToHttp(mx, key, useAuthentication);
+      {autoCompleteEmoticon.length === 0 ? (
+        <Text size="B400">No emojis found</Text>
+      ) : (
+        autoCompleteEmoticon.map((emoticon) => {
+          const isCustomEmoji = 'url' in emoticon;
+          const key = isCustomEmoji ? emoticon.url : emoticon.unicode;
+          const customEmojiUrl = mxcUrlToHttp(mx, key, useAuthentication);
 
-        return (
-          <MenuItem
-            key={emoticon.shortcode + key}
-            as="button"
-            radii="300"
-            onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
-              onTabPress(evt, () => handleAutocomplete(key, emoticon.shortcode))
-            }
-            onMouseDown={(evt: ReactMouseEvent<HTMLButtonElement>) => evt.preventDefault()}
-            onClick={() => handleAutocomplete(key, emoticon.shortcode)}
-            before={
-              isCustomEmoji && customEmojiUrl ? (
-                <Box
-                  shrink="No"
-                  as="img"
-                  src={customEmojiUrl}
-                  alt={emoticon.shortcode}
-                  style={{
-                    width: toRem(24),
-                    height: toRem(24),
-                    objectFit: 'contain',
-                  }}
-                />
-              ) : (
-                <Box
-                  shrink="No"
-                  as="span"
-                  display="InlineFlex"
-                  style={{ fontSize: toRem(24), lineHeight: toRem(24) }}
-                >
-                  {key}
-                </Box>
-              )
-            }
-          >
-            <Text style={{ flexGrow: 1 }} size="B400" truncate>
-              :{emoticon.shortcode}:
-            </Text>
-          </MenuItem>
-        );
-      })}
+          return (
+            <MenuItem
+              key={emoticon.shortcode + key}
+              as="button"
+              radii="300"
+              onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
+                onTabPress(evt, () => handleAutocomplete(key, emoticon.shortcode))
+              }
+              onMouseDown={(evt: ReactMouseEvent<HTMLButtonElement>) => evt.preventDefault()}
+              onClick={() => handleAutocomplete(key, emoticon.shortcode)}
+              before={
+                isCustomEmoji && customEmojiUrl ? (
+                  <Box
+                    shrink="No"
+                    as="img"
+                    src={customEmojiUrl}
+                    alt={emoticon.shortcode}
+                    style={{
+                      width: toRem(24),
+                      height: toRem(24),
+                      objectFit: 'contain',
+                    }}
+                  />
+                ) : (
+                  <Box
+                    shrink="No"
+                    as="span"
+                    display="InlineFlex"
+                    style={{ fontSize: toRem(24), lineHeight: toRem(24) }}
+                  >
+                    {key}
+                  </Box>
+                )
+              }
+            >
+              <Text style={{ flexGrow: 1 }} size="B400" truncate>
+                :{emoticon.shortcode}:
+              </Text>
+            </MenuItem>
+          );
+        })
+      )}
     </AutocompleteMenu>
   );
 }