From 2661a53333ef9ff541b7f74df89f041c0dd604e3 Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Thu, 13 Nov 2025 16:33:43 +0100
Subject: [PATCH] focus on mount

---
 .../components/emoji/picker/index.tsx         | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/javascript/mastodon/components/emoji/picker/index.tsx b/app/javascript/mastodon/components/emoji/picker/index.tsx
index dcb49488171..537a43abe9e 100644
--- a/app/javascript/mastodon/components/emoji/picker/index.tsx
+++ b/app/javascript/mastodon/components/emoji/picker/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { FC, MouseEventHandler } from 'react';
 
 import classNames from 'classnames';
@@ -32,12 +32,7 @@ export const MockEmojiPicker: FC<MockEmojiPickerProps> = ({ onSelect }) => {
     [onSelect],
   );
 
-  const [showSettings, setShowSettings] = useState(false);
-  const handleSettingsClick: MouseEventHandler = useCallback((event) => {
-    event.preventDefault();
-    setShowSettings((prev) => !prev);
-  }, []);
-
+  const { groups } = useLocaleMessages();
   const wrapperRef = useRef<HTMLDivElement>(null);
   const handleGroupSelect = useCallback((key: string) => {
     const wrapper = wrapperRef.current;
@@ -57,7 +52,19 @@ export const MockEmojiPicker: FC<MockEmojiPickerProps> = ({ onSelect }) => {
     }
   }, []);
 
-  const { groups } = useLocaleMessages();
+  const searchRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const searchInput = searchRef.current;
+    if (!searchInput) return;
+
+    searchInput.focus();
+  }, []);
+
+  const [showSettings, setShowSettings] = useState(false);
+  const handleSettingsClick: MouseEventHandler = useCallback((event) => {
+    event.preventDefault();
+    setShowSettings((prev) => !prev);
+  }, []);
 
   return (
     <CustomEmojiProvider emojis={mockCustomEmojis}>
@@ -67,6 +74,7 @@ export const MockEmojiPicker: FC<MockEmojiPickerProps> = ({ onSelect }) => {
             type='search'
             placeholder='Search emojis'
             className={classes.search}
+            ref={searchRef}
           />
           <IconButton
             icon='settings'