fix: enhance focus and hover behavior in pickers when keyboard is used (#118)

src/components/EmojiPicker.tsx

@@ -43,7 +43,11 @@ const EmojiCell = memo(function EmojiCell({
       onClick={() => onSelect(emoji)}
       onMouseEnter={() => onHover?.(emoji)}
       onMouseLeave={() => onHover?.(null)}
-      onFocus={onItemFocus}
+      onFocus={() => {
+        onItemFocus?.()
+        onHover?.(emoji)
+      }}
+      onBlur={() => onHover?.(null)}
       onKeyDown={onKeyDown}
       tabIndex={tabIndex}
       data-main-index={mainIndex}

src/components/KaomojiPicker.tsx

@@ -126,10 +126,16 @@ export function KaomojiPicker({ isDark, opacity, customKaomojis = [] }: KaomojiP
               data-kaomoji-index={index}
               tabIndex={index === gridFocusedIndex ? 0 : -1}
               onClick={() => handlePaste(item.text)}
-              onFocus={() => setGridFocusedIndex(index)}
+              onFocus={() => {
+                setGridFocusedIndex(index)
+                setHoveredKaomoji({ text: item.text, category: item.category })
+              }}
+              onBlur={() => setHoveredKaomoji(null)}
               onKeyDown={(e) => handleGridKeyDown(e, index)}
               onMouseEnter={() => setHoveredKaomoji({ text: item.text, category: item.category })}
-              onMouseLeave={() => setHoveredKaomoji(null)}
+              onMouseLeave={() => {
+                setHoveredKaomoji(null)
+              }}
               className={clsx(
                 'h-12 flex items-center justify-center rounded-md text-sm',
                 'hover:scale-105 transition-transform duration-100 transform-gpu',

src/components/SymbolPicker.tsx

@@ -43,7 +43,11 @@ const SymbolCell = memo(function SymbolCell({
       onClick={() => onSelect(symbol)}
       onMouseEnter={() => onHover?.(symbol)}
       onMouseLeave={() => onHover?.(null)}
-      onFocus={onItemFocus}
+      onFocus={() => {
+        onItemFocus?.()
+        onHover?.(symbol)
+      }}
+      onBlur={() => onHover?.(null)}
       onKeyDown={onKeyDown}
       tabIndex={tabIndex}
       data-main-index={mainIndex}