emoji-picker-react 4.21.0 → 4.21.1

package/package.json

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

package/src/hooks/useEmojiPreviewEvents.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 
+import { detectEmojyPartiallyBelowFold } from '../DomUtils/detectEmojyPartiallyBelowFold';
 import { focusElement } from '../DomUtils/focusElement';
 import {
   allUnifiedFromEmojiElement,
@@ -107,11 +108,25 @@ export function useEmojiPreviewEvents(
       // 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()) {
+      // Partially visible buttons are never focused: focusing would make
+      // the browser scroll them into view, yanking the scroll position
+      // while the user is browsing (see also PR #509).
+      if (
+        !isExternalElementFocused() &&
+        !isPartiallyBelowFold(button, bodyRef)
+      ) {
         focusElement(button, () => !isExternalElementFocused());
       }
     }
 
+    function isPartiallyBelowFold(
+      button: HTMLButtonElement,
+      body: HTMLElement | null,
+    ): boolean {
+      const belowFoldByPx = detectEmojyPartiallyBelowFold(button, body);
+      return belowFoldByPx < button.getBoundingClientRect().height;
+    }
+
     function isExternalElementFocused(): boolean {
       const active = document.activeElement as HTMLElement | null;
 
@@ -129,5 +144,5 @@ export function useEmojiPreviewEvents(
       bodyRef?.removeEventListener('blur', onLeave, true);
       bodyRef?.removeEventListener('keydown', onEscape);
     };
-  }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
+  }, [BodyRef, PickerMainRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
 }