[ECO-2275] Focus emoji picker on input click (#351)

econia-labs · Nov 26, 2024 · aa481d6 · aa481d6
1 parent 295cf61
commit aa481d6
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/typescript/frontend/src/components/emoji-picker/EmojiPickerWithInput.tsx b/src/typescript/frontend/src/components/emoji-picker/EmojiPickerWithInput.tsx
@@ -239,7 +239,15 @@ export const EmojiPickerWithInput = ({
                     e.stopPropagation();
                   }}
                   onClick={() => {
+                    const shadowRoot = document.querySelector("em-emoji-picker")
+                      ?.shadowRoot as ShadowRoot;
+                    const pickerInputElement = shadowRoot.querySelector(
+                      "div.search input"
+                    ) as HTMLInputElement;
                     setPickerInvisible(false);
+                    if (pickerInvisible) {
+                      pickerInputElement.focus();
+                    }
                   }}
                   data-testid="emoji-input"
                   style={{ fontFamily: EMOJI_FONT_FAMILY }}