Sheet header not where it should be when dragged

[nadiannis]

Context

I created a bottom sheet using this library in my app. The sheet is scrollable & non-closable. The snap points are [0.5, 0.35, 0.2].

Code:

<Sheet
  ref={ref}
  isOpen={true}
  onClose={() => snapTo(2)}
  snapPoints={[0.5, 0.35, 0.2]}
  initialSnap={2}
  springConfig={{ stiffness: 150, damping: 20, mass: 0.7 }}
>
  {/* ... */}
</Sheet>

My dependencies:

{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "framer-motion": "^10.2.3",
  "react-modal-sheet": "^1.10.1"
}

Problem

The problem was found when I opened the app on my phone's browser & the browser address bar was hidden when scrolling. I think the size of the screen height changed.

Every time the screen height changes, the sheet header will overflow when dragged. I notice the translateY value changes.

Does anyone know why this happened? And how to fix it?

react-modal-sheet-test-1.mp4

react-modal-sheet-test-2.mp4

To Reproduce

• Go to this page: https://1fk6g6.csb.app
• Open the devtools.
• Click "Toggle device toolbar" & choose responsive dimension.
• Resize the height of the screen.
• Drag the bottom sheet header.

Code: https://codesandbox.io/s/react-modal-sheet-test-1fk6g6

[Temzasse]

Thank you for reporting this 🙏🏻

I wonder if this is a bug in the library or in Framer Motion 🤔 I'll try to find some time to investigate this.

[Vetin]

@Temzasse
I think it's bug in Framer Motion, because this hack solves issue

diff --git a/src/SheetContent.tsx b/src/SheetContent.tsx
index 99f26ab..0bc636c 100644
--- a/src/SheetContent.tsx
+++ b/src/SheetContent.tsx
@@ -7,19 +7,24 @@ import styles from './styles';
 
 const SheetContent = React.forwardRef<any, SheetDraggableProps>(
   ({ children, style, disableDrag, className = '', ...rest }, ref) => {
+    const positionRef = React.useRef<HTMLDivElement>(null);
     const { dragProps } = useSheetContext();
     const _dragProps = disableDrag ? undefined : dragProps;
 
     return (
-      <motion.div
-        {...rest}
-        ref={ref}
-        className={`react-modal-sheet-content ${className}`}
-        style={{ ...styles.content, ...style }}
-        {..._dragProps}
-      >
-        {children}
-      </motion.div>
+      <>
+        <div ref={positionRef} />
+        <motion.div
+          {...rest}
+          ref={ref}
+          className={`react-modal-sheet-content ${className}`}
+          style={{ ...styles.content, ...style }}
+          {..._dragProps}
+          dragConstraints={positionRef}
+        >
+          {children}
+        </motion.div>
+      </>
     );
   }
 );
diff --git a/src/SheetHeader.tsx b/src/SheetHeader.tsx
index 4ef742e..cc585a9 100644
--- a/src/SheetHeader.tsx
+++ b/src/SheetHeader.tsx
@@ -7,6 +7,7 @@ import styles from './styles';
 
 const SheetHeader = React.forwardRef<any, SheetDraggableProps>(
   ({ children, style, disableDrag, ...rest }, ref) => {
+    const positionRef = React.useRef<HTMLDivElement>(null);
     const { indicatorRotation, dragProps } = useSheetContext();
     const _dragProps = disableDrag ? undefined : dragProps;
 
@@ -21,25 +22,29 @@ const SheetHeader = React.forwardRef<any, SheetDraggableProps>(
     );
 
     return (
-      <motion.div
-        {...rest}
-        ref={ref}
-        style={{ ...styles.headerWrapper, ...style }}
-        {..._dragProps}
-      >
-        {children || (
-          <div className="react-modal-sheet-header" style={styles.header}>
-            <motion.span
-              className="react-modal-sheet-drag-indicator"
-              style={{ ...styles.indicator, transform: indicator1Transform }}
-            />
-            <motion.span
-              className="react-modal-sheet-drag-indicator"
-              style={{ ...styles.indicator, transform: indicator2Transform }}
-            />
-          </div>
-        )}
-      </motion.div>
+      <>
+        <div ref={positionRef} />
+        <motion.div
+          {...rest}
+          ref={ref}
+          style={{ ...styles.headerWrapper, ...style }}
+          {..._dragProps}
+          dragConstraints={positionRef}
+        >
+          {children || (
+            <div className="react-modal-sheet-header" style={styles.header}>
+              <motion.span
+                className="react-modal-sheet-drag-indicator"
+                style={{ ...styles.indicator, transform: indicator1Transform }}
+              />
+              <motion.span
+                className="react-modal-sheet-drag-indicator"
+                style={{ ...styles.indicator, transform: indicator2Transform }}
+              />
+            </div>
+          )}
+        </motion.div>
+      </>
     );
   }
 );

[ReidCampbell]

Any luck with this? Did the code above work?

[Temzasse]

This should be fixed now. See more info here: #136 (comment).

The fix is released in v2.2.0. Please let me know if the problem still persists 😊