react-modal-sheet 5.3.1 → 5.4.0

package/README.md

@@ -423,18 +423,21 @@ function KeyboardExample() {
 }
 ```
 
-The keyboard avoidance feature:
+Virtual keyboard avoidance consists of several key features:
 
 - Uses the `env(keyboard-inset-height)` from [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API) and fallbacks to [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) and custom `keyboard-inset-height` CSS environment variable.
 - Works automatically on mobile devices with virtual keyboard support.
 - Applies dynamic padding to keep content visible when the keyboard opens.
+- Scrolls the focused input into view if it's covered by the keyboard.
 - Disables drag gestures while the keyboard is open to prevent glitches.
-- When using snap points if the sheet is at a snap point that would be covered by the keyboard, **the sheet will be automatically moved up to ensure the content is visible and then moved back down when the keyboard closes.**
+- When using snap points, the sheet will be automatically moved up to the last snap point to ensure that all content is reachable (even when the content is scrollable) within the sheet when the keyboard is open.
 
-If you need to disable keyboard avoidance, set `avoidKeyboard={false}`.
-
-> [!IMPORTANT]
-> If your sheet content is very long and some inputs are below the keyboard even after adding the padding, you might need to scroll the content into view manually when an input is focused.
+> [!NOTE]
+> Avoiding the virtual keyboard is a complex problem and the built-in avoidance may not work perfectly in all cases or on all devices. The library does its best to handle the most common scenarios but there may be edge cases where it doesn't work as expected.
+>
+> Mobile browsers, eg. Android Chrome, may try to automatically move the focused input into view when the keyboard opens which might interfere with the built-in keyboard avoidance behavior causing the sheet content to jump around.
+>
+> If you need to disable the built-in keyboard avoidance, set `avoidKeyboard={false}`.
 
 #### Managing virtual keyboard manually
 

package/dist/index.js

@@ -218,13 +218,16 @@ var SheetBackdrop = React4.forwardRef(
       ...style,
       pointerEvents
     };
+    const animationProps = sheetContext.prefersReducedMotion ? {} : {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 1 }
+    };
     return /* @__PURE__ */ React4__default.default.createElement(
       Comp,
       {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 1 },
+        ...animationProps,
         ...rest,
         ref,
         className: `react-modal-sheet-backdrop ${className}`,
@@ -523,6 +526,36 @@ function useDimensions() {
   }, []);
   return dimensions;
 }
+function useFocusedInput({
+  isEnabled,
+  sheetRef
+}) {
+  const [focusedInput, setFocusedInput] = React4.useState(null);
+  React4.useEffect(() => {
+    if (!isEnabled) return;
+    const handleFocusIn = (event) => {
+      var _a;
+      const focusedElement = event.target;
+      const isInput = (focusedElement == null ? void 0 : focusedElement.tagName) === "INPUT" || (focusedElement == null ? void 0 : focusedElement.tagName) === "TEXTAREA";
+      if (isInput && ((_a = sheetRef.current) == null ? void 0 : _a.contains(focusedElement))) {
+        setFocusedInput(focusedElement);
+      }
+    };
+    const handleFocusOut = (event) => {
+      const focusedElement = event.target;
+      if (focusedElement === focusedInput) {
+        setFocusedInput(null);
+      }
+    };
+    document.addEventListener("focusin", handleFocusIn);
+    document.addEventListener("focusout", handleFocusOut);
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+      document.removeEventListener("focusout", handleFocusOut);
+    };
+  }, [isEnabled, focusedInput]);
+  return focusedInput;
+}
 function useSafeAreaInsets() {
   const [insets] = React4.useState(() => {
     const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
@@ -1307,29 +1340,6 @@ var Sheet = React4.forwardRef(
       height: sheetHeight,
       snapTo
     }));
-    React4.useEffect(() => {
-      if (isOpen && snapPoints.length > 0 && avoidKeyboard && keyboard.isKeyboardOpen) {
-        const focusedElement = document.activeElement;
-        const visibleSheetHeight = yInverted.get() - keyboard.keyboardHeight;
-        if (visibleSheetHeight <= 0 && focusedElement) {
-          const currentY = y.get();
-          const diffY = Math.max(currentY - Math.abs(visibleSheetHeight), 0);
-          requestAnimationFrame(() => {
-            var _a;
-            const inputRect = focusedElement.getBoundingClientRect();
-            const sheetRect = (_a = sheetRef.current) == null ? void 0 : _a.getBoundingClientRect();
-            let inputOffset = 0;
-            if (sheetRect) {
-              inputOffset = inputRect.top - sheetRect.top + inputRect.height;
-            }
-            react.animate(y, diffY - inputOffset, animationOptions);
-          });
-          return () => {
-            react.animate(y, currentY, animationOptions);
-          };
-        }
-      }
-    }, [isOpen, keyboard.isKeyboardOpen]);
     useModalEffect({
       y,
       detent,
@@ -1341,6 +1351,41 @@ var Sheet = React4.forwardRef(
     usePreventScroll({
       isDisabled: disableScrollLocking || !isOpen
     });
+    const focusedInput = useFocusedInput({
+      isEnabled: isOpen && avoidKeyboard,
+      sheetRef
+    });
+    React4.useEffect(() => {
+      if (!isOpen || !avoidKeyboard) {
+        return;
+      }
+      async function adjustSheetForKeyboard() {
+        const sheetElement = sheetRef.current;
+        if (!sheetElement || !focusedInput || !keyboard.isKeyboardOpen) {
+          return;
+        }
+        const lastSnapPoint = snapPoints[snapPoints.length - 1];
+        if (lastSnapPoint) {
+          await react.animate(y, lastSnapPoint.snapValueY, animationOptions);
+          updateSnap(lastSnapPoint.snapIndex);
+        }
+        requestAnimationFrame(() => {
+          const inputRect = focusedInput.getBoundingClientRect();
+          const sheetRect = sheetElement.getBoundingClientRect();
+          const scroller = sheetElement.querySelector(
+            ".react-modal-sheet-content-scroller"
+          );
+          const scrollTarget = Math.max(
+            inputRect.top - sheetRect.top + scroller.scrollTop - inputRect.height,
+            0
+          );
+          requestAnimationFrame(() => {
+            scroller.scrollTo({ top: scrollTarget, behavior: "smooth" });
+          });
+        });
+      }
+      adjustSheetForKeyboard();
+    }, [isOpen, avoidKeyboard, keyboard.isKeyboardOpen, focusedInput]);
     const state = useSheetState({
       isOpen,
       onOpen: async () => {
@@ -1376,6 +1421,7 @@ var Sheet = React4.forwardRef(
       dragProps,
       indicatorRotation,
       avoidKeyboard,
+      prefersReducedMotion,
       sheetBoundsRef,
       sheetRef,
       unstyled,