[WIKI-823] fix: callout element emoji search (#8201)

* fix: emoji search input

* fix: enhance keyboard navigation in EmojiPicker component

packages/propel/src/emoji-icon-picker/emoji-picker.tsx

@@ -108,6 +108,19 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
         align={finalAlign}
         sideOffset={8}
         data-prevent-outside-click="true"
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+        onFocus={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === "Tab") {
+            return;
+          }
+          if (e.key === "Escape") {
+            handleToggle(false);
+            return;
+          }
+          e.stopPropagation();
+        }}
       >
         <Tabs.Root defaultValue={defaultOpen}>
           <Tabs.List className="grid grid-cols-2 gap-1 px-3.5 pt-3">

packages/propel/src/emoji-icon-picker/emoji/emoji.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { EmojiPicker } from "frimousse";
 import { cn } from "../../utils";
 
@@ -9,6 +10,21 @@ type EmojiRootProps = {
 
 export function EmojiRoot(props: EmojiRootProps) {
   const { onChange, searchPlaceholder = "Search", searchDisabled = false } = props;
+  const searchWrapperRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const focusInput = () => {
+      const searchWrapper = searchWrapperRef.current;
+      if (searchWrapper) {
+        const inputElement = searchWrapper.querySelector("input");
+        if (inputElement) {
+          inputElement.removeAttribute("disabled");
+          inputElement.focus();
+        }
+      }
+    };
+    focusInput();
+  }, []);
+
   return (
     <EmojiPicker.Root
       data-slot="emoji-picker"
@@ -16,7 +32,7 @@ export function EmojiRoot(props: EmojiRootProps) {
       onEmojiSelect={(val) => onChange(val.emoji)}
     >
       <div className="flex items-center gap-2 justify-between [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0 px-1.5 py-2 sticky top-0 z-10 bg-custom-background-100">
-        <div data-slot="emoji-picker-search-wrapper" className="p-2">
+        <div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
           <EmojiPicker.Search
             placeholder={searchPlaceholder}
             disabled={searchDisabled}