From 3f6c94cfc3e2cb2b88d5d8eae77eb92a5fe869b9 Mon Sep 17 00:00:00 2001
From: Joey Lee <jq@yeoji.com>
Date: Sat, 10 Feb 2024 06:41:41 +1100
Subject: [PATCH] Auto select first emoji in emoji picker (#26165)

---
 .../__snapshots__/emoji_picker.test.tsx.snap  |  6 +++---
 .../emoji_picker/emoji_picker.test.tsx        | 20 +++++++++++++++++++
 .../components/emoji_picker/emoji_picker.tsx  | 17 ++++++++++++++++
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
index ea77492c92..04027027b5 100644
--- a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
+++ b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
       aria-live="assertive"
       class="sr-only"
     >
-       emoji
+      grinning emoji
     </div>
     <div
       class="emoji-picker__search-container"
@@ -159,9 +159,9 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
       class="emoji-picker__footer"
     >
       <div
-        class="emoji-picker__preview emoji-picker__preview-placeholder"
+        class="emoji-picker__preview"
       >
-        Select an Emoji
+        Preview for grinning emoji
       </div>
     </div>
   </div>
diff --git a/webapp/channels/src/components/emoji_picker/emoji_picker.test.tsx b/webapp/channels/src/components/emoji_picker/emoji_picker.test.tsx
index 97ccb8e3ad..92effa827f 100644
--- a/webapp/channels/src/components/emoji_picker/emoji_picker.test.tsx
+++ b/webapp/channels/src/components/emoji_picker/emoji_picker.test.tsx
@@ -4,6 +4,8 @@
 import React from 'react';
 import {IntlProvider} from 'react-intl';
 
+import type {SystemEmoji} from '@mattermost/types/emojis';
+
 import {render, screen} from 'tests/react_testing_utils';
 import EmojiMap from 'utils/emoji_map';
 
@@ -12,6 +14,9 @@ import EmojiPicker from './emoji_picker';
 jest.mock('components/emoji_picker/components/emoji_picker_skin', () => () => (
     <div/>
 ));
+jest.mock('components/emoji_picker/components/emoji_picker_preview', () => ({emoji}: {emoji?: SystemEmoji}) => (
+    <div className='emoji-picker__preview'>{`Preview for ${emoji?.short_name} emoji`}</div>
+));
 
 describe('components/emoji_picker/EmojiPicker', () => {
     const intlProviderProps = {
@@ -73,4 +78,19 @@ describe('components/emoji_picker/EmojiPicker', () => {
 
         expect(screen.queryByLabelText('emoji_picker.recent')).not.toBeNull();
     });
+
+    test('First emoji should be selected on search', () => {
+        const props = {
+            ...baseProps,
+            filter: 'wave',
+        };
+
+        render(
+            <IntlProvider {...intlProviderProps}>
+                <EmojiPicker {...props}/>
+            </IntlProvider>,
+        );
+
+        expect(screen.queryByText('Preview for wave emoji')).not.toBeNull();
+    });
 });
diff --git a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
index 6585787f09..db1705aa26 100644
--- a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
+++ b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx
@@ -120,6 +120,7 @@ const EmojiPicker = ({
 
         const [updatedCategoryOrEmojisRows, updatedEmojiPositions] = createCategoryAndEmojiRows(allEmojis, categories, filter, userSkinTone);
 
+        selectFirstEmoji(updatedEmojiPositions);
         setCategoryOrEmojisRows(updatedCategoryOrEmojisRows);
         setEmojiPositionsArray(updatedEmojiPositions);
         throttledSearchCustomEmoji.current(filter, customEmojisEnabled);
@@ -159,6 +160,22 @@ const EmojiPicker = ({
         return emoji;
     };
 
+    const selectFirstEmoji = (emojiPositions: EmojiPosition[]) => {
+        if (!emojiPositions[0]) {
+            return;
+        }
+
+        const {rowIndex, emojiId} = emojiPositions[0];
+        const cursorEmoji = getEmojiById(emojiId);
+        if (cursorEmoji) {
+            setCursor({
+                rowIndex,
+                emojiId,
+                emoji: cursorEmoji,
+            });
+        }
+    };
+
     const handleCategoryClick = useCallback((categoryRowIndex: CategoryOrEmojiRow['index'], categoryName: EmojiCategory, emojiId: string) => {
         if (!categoryName || categoryName === activeCategory || !emojiId) {
             return;