feat: add prop to disable input repositioning (#410)

* Reset body styles

* Rename prop

README.md

@@ -64,7 +64,7 @@ Additional props:
 
 `direction`: Direction of the drawer. Can be `top` or `bottom`, `left`, `right`. Defaults to `bottom`.
 
-`disablePreventScroll`: When `true` scroll prevention mechanism will be disabled. Scroll prevention ensures that page will not scroll on mobile when opening drawer. However this mechanism gets confused when drawer has an input with autofocus and therefore opens simulataneosly with touch keyboard. Defaults to `true`. `modal` set to `false` also disables it.
+`repositionInputs`: When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to `false` will fall back to the default browser behavior.
 
 `noBodyStyles`: When `true` the `body` doesn't get any styles assigned from Vaul.
 

src/index.tsx

@@ -51,8 +51,8 @@ export type DialogProps = {
   nested?: boolean;
   onClose?: () => void;
   direction?: 'top' | 'bottom' | 'left' | 'right';
-  disablePreventScroll?: boolean;
   defaultOpen?: boolean;
+  repositionInputs?: boolean;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 export function Root({
@@ -76,7 +76,7 @@ export function Root({
   noBodyStyles,
   direction = 'bottom',
   defaultOpen = false,
-  disablePreventScroll = false,
+  repositionInputs = true,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = useControllableState({
     defaultProp: defaultOpen,
@@ -126,7 +126,7 @@ export function Root({
   });
 
   usePreventScroll({
-    isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || disablePreventScroll,
+    isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || !repositionInputs,
   });
 
   function getScale() {
@@ -401,17 +401,6 @@ export function Root({
     }, TRANSITIONS.DURATION * 1000); // seconds to ms
   }
 
-  React.useEffect(() => {
-    if (!isOpen && shouldScaleBackground) {
-      // Can't use `onAnimationEnd` as the component will be invisible by then
-      const id = setTimeout(() => {
-        reset(document.body);
-      }, 200);
-
-      return () => clearTimeout(id);
-    }
-  }, [isOpen, shouldScaleBackground]);
-
   function resetDrawer() {
     if (!drawerRef.current) return;
     const wrapper = document.querySelector('[data-vaul-drawer-wrapper]');
@@ -699,7 +688,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
   const wasBeyondThePointRef = React.useRef(false);
   const hasSnapPoints = snapPoints && snapPoints.length > 0;
   useScaleBackground();
-  
+
   const isDeltaInDirection = (delta: { x: number; y: number }, direction: DrawerDirection, threshold = 0) => {
     if (wasBeyondThePointRef.current) return true;
 

src/use-scale-background.ts

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useDrawerContext } from './context';
-import { assignStyle, chain, isVertical } from './helpers';
+import { assignStyle, chain, isVertical, reset } from './helpers';
 import { BORDER_RADIUS, TRANSITIONS, WINDOW_TOP_OFFSET } from './constants';
 
 const noop = () => () => {};
 
 export function useScaleBackground() {
   const { direction, isOpen, shouldScaleBackground, setBackgroundColorOnScale, noBodyStyles } = useDrawerContext();
   const timeoutIdRef = React.useRef<number | null>(null);
+  const initialBackgroundColor = useMemo(() => document.body.style.backgroundColor, []);
 
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
@@ -44,8 +45,14 @@ export function useScaleBackground() {
         wrapperStylesCleanup();
         timeoutIdRef.current = window.setTimeout(() => {
           bodyAndWrapperCleanup();
+
+          if (initialBackgroundColor) {
+            document.body.style.background = initialBackgroundColor;
+          } else {
+            document.body.style.removeProperty('background');
+          }
         }, TRANSITIONS.DURATION * 1000);
       };
     }
-  }, [isOpen, shouldScaleBackground]);
+  }, [isOpen, shouldScaleBackground, initialBackgroundColor]);
 }

test/src/app/globals.css

@@ -2,17 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body {
-  overflow: hidden;
-}
-
 body,
 main {
-  min-height: 100vh;
-  /* mobile viewport bug fix */
-  min-height: -webkit-fill-available;
-  overflow-x: hidden;
+  min-height: 500vh;
 }
 
 html {

test/src/app/page.tsx

@@ -13,6 +13,7 @@ export default function Page() {
       <Link href="/non-dismissible">Non-dismissible</Link>
       <Link href="/initial-snap">Initial snap</Link>
       <Link href="/controlled">Controlled</Link>
+      <Link href="/default-open">Controlled</Link>
     </div>
   );
 }