emoji-picker-react 4.20.7 → 4.20.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.20.7",
+  "version": "4.20.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/DomUtils/focusElement.ts

@@ -1,11 +1,19 @@
 import { NullableElement } from './selectors';
 
-export function focusElement(element: NullableElement) {
+export function focusElement(
+  element: NullableElement,
+  shouldFocus?: () => boolean,
+) {
   if (!element) {
     return;
   }
 
   requestAnimationFrame(() => {
+    // Rechecked here rather than at call time: focus may have moved in the
+    // meantime (e.g. hover scheduled focus, then the user tabbed out).
+    if (shouldFocus && !shouldFocus()) {
+      return;
+    }
     element.focus();
   });
 }

package/src/components/navigation/CategoryNavigation.tsx

@@ -31,6 +31,17 @@ export function CategoryNavigation() {
   const CategoryNavigationRef = useCategoryNavigationRef();
   const hideCustomCategory = useShouldHideCustomEmojis();
 
+  const visibleCategories = categoriesConfig.filter(
+    categoryConfig =>
+      !(isCustomCategory(categoryConfig) && hideCustomCategory),
+  );
+
+  // A single tab navigates nowhere — hide the bar to reclaim its space.
+  // https://github.com/ealush/emoji-picker-react/issues/396
+  if (visibleCategories.length <= 1) {
+    return null;
+  }
+
   return (
     <div
       className={cx(styles.nav)}
@@ -39,14 +50,10 @@ export function CategoryNavigation() {
       id="epr-category-nav-id"
       ref={CategoryNavigationRef}
     >
-      {categoriesConfig.map((categoryConfig) => {
+      {visibleCategories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
         const isActiveCategory = category === activeCategory;
 
-        if (isCustomCategory(categoryConfig) && hideCustomCategory) {
-          return null;
-        }
-
         const allowNavigation = !isSearchMode && !isActiveCategory;
 
         return (

package/src/hooks/useEmojiPreviewEvents.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 
-import { detectEmojyPartiallyBelowFold } from '../DomUtils/detectEmojyPartiallyBelowFold';
 import { focusElement } from '../DomUtils/focusElement';
 import {
   allUnifiedFromEmojiElement,
   buttonFromTarget,
 } from '../DomUtils/selectors';
-import { useBodyRef } from '../components/context/ElementRefContext';
+import {
+  useBodyRef,
+  usePickerMainRef,
+} from '../components/context/ElementRefContext';
 import { PreviewEmoji } from '../components/footer/Preview';
 
 import {
@@ -20,6 +22,7 @@ export function useEmojiPreviewEvents(
   setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>,
 ) {
   const BodyRef = useBodyRef();
+  const PickerMainRef = usePickerMainRef();
   const isMouseDisallowed = useIsMouseDisallowed();
   const allowMouseMove = useAllowMouseMove();
 
@@ -84,17 +87,41 @@ export function useEmojiPreviewEvents(
 
       const button = buttonFromTarget(e.target as HTMLElement);
 
-      if (button) {
-        const belowFoldByPx = detectEmojyPartiallyBelowFold(button, bodyRef);
-        const buttonHeight = button.getBoundingClientRect().height;
-        if (belowFoldByPx < buttonHeight) {
-          return handlePartiallyVisibleElementFocus(button, setPreviewEmoji);
-        }
+      if (!button) {
+        return;
+      }
+
+      const { unified, originalUnified } = allUnifiedFromEmojiElement(button);
+
+      if (!unified || !originalUnified) {
+        return;
+      }
+
+      setPreviewEmoji({
+        unified,
+        originalUnified,
+      });
 
-        focusElement(button);
+      // Let arrow-key navigation continue from the hovered emoji, but only
+      // when focus is already inside the picker (or nowhere meaningful).
+      // Pulling focus out of an external element steals the caret from
+      // host-app inputs (issue #320). The guard runs again inside the
+      // deferred callback in case focus moved out after this event.
+      if (!isExternalElementFocused()) {
+        focusElement(button, () => !isExternalElementFocused());
       }
     }
 
+    function isExternalElementFocused(): boolean {
+      const active = document.activeElement as HTMLElement | null;
+
+      if (!active || active === document.body || active === document.documentElement) {
+        return false;
+      }
+
+      return !PickerMainRef.current?.contains(active);
+    }
+
     return () => {
       bodyRef?.removeEventListener('mouseover', onMouseOver);
       bodyRef?.removeEventListener('mouseout', onLeave);
@@ -104,21 +131,3 @@ export function useEmojiPreviewEvents(
     };
   }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
 }
-
-function handlePartiallyVisibleElementFocus(
-  button: HTMLElement,
-  setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>,
-) {
-  const { unified, originalUnified } = allUnifiedFromEmojiElement(button);
-
-  if (!unified || !originalUnified) {
-    return;
-  }
-
-  (document.activeElement as HTMLElement)?.blur?.();
-
-  setPreviewEmoji({
-    unified,
-    originalUnified,
-  });
-}