emoji-picker-react 4.21.0 → 4.21.1

package/dist/emoji-picker-react.cjs.development.js

@@ -29974,6 +29974,16 @@ var styles$a = /*#__PURE__*/stylesheet.create({
   }
 });
 
+function detectEmojyPartiallyBelowFold(button, bodyRef) {
+  if (!button || !bodyRef) {
+    return 0;
+  }
+  var buttonRect = button.getBoundingClientRect();
+  var bodyRect = bodyRef.getBoundingClientRect();
+  // If the element is obscured by at least half of its size
+  return bodyRect.height - (buttonRect.y - bodyRect.y);
+}
+
 function useEmojiPreviewEvents(allow, setPreviewEmoji) {
   var BodyRef = useBodyRef();
   var PickerMainRef = usePickerMainRef();
@@ -30046,12 +30056,19 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       // 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, function () {
           return !isExternalElementFocused();
         });
       }
     }
+    function isPartiallyBelowFold(button, body) {
+      var belowFoldByPx = detectEmojyPartiallyBelowFold(button, body);
+      return belowFoldByPx < button.getBoundingClientRect().height;
+    }
     function isExternalElementFocused() {
       var _PickerMainRef$curren;
       var active = document.activeElement;
@@ -30067,7 +30084,7 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('blur', onLeave, true);
       bodyRef == null ? void 0 : bodyRef.removeEventListener('keydown', onEscape);
     };
-  }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
+  }, [BodyRef, PickerMainRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
 }
 
 var _stylesheet$create;