emilkowalski / vaul

An unstyled drawer component for React.
https://vaul.emilkowal.ski
MIT License
5.56k stars 181 forks source link

Drawer not behaving correctly with snap enabled #197

Open ImPrankster opened 7 months ago

ImPrankster commented 7 months ago

When using snap the drawer will not come up if not setting the height to a large number.

Expected behavior: drawer come up, snap at 200px, snap at height fits all content.

Current behavior: drawer will not come up if there is no h-full or h-[1000px] (any large number)

"use client";

import { useState } from "react";
import { Drawer } from "vaul";

export function SettingsDrawer() {
  const [snap, setSnap] = useState<number | string | null>("200px");

  return (
    <Drawer.Root
      snapPoints={["200px", 1]}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      modal={false}
      dismissible={false}
      open
    >
      <Drawer.Portal>
        <Drawer.Content className="border-b-none fixed bottom-0 left-0 right-0 flex flex-col rounded-t-xl bg-white">
          <div className="mx-auto flex w-full flex-col p-4 pt-5">
            <h1 className="mt-2 text-2xl font-medium">
              Voluptate amet ipsum elit. Dolore culpa ad minim fugiat laboris
              magna. Cillum irure incididunt incididunt esse qui. Id anim nulla
              non enim sit irure amet nisi culpa exercitation deserunt.
            </h1>
            <p className="mb-6 mt-1 text-sm text-gray-600">
              Voluptate amet ipsum elit. Dolore culpa ad minim fugiat laboris
              magna. Cillum irure incididunt incididunt esse qui. Id anim nulla
              non enim sit irure amet nisi culpa exercitation deserunt.
            </p>
            <p className="text-gray-600">
              Voluptate amet ipsum elit. Dolore culpa ad minim fugiat laboris
              magna. Cillum irure incididunt incididunt esse qui. Id anim nulla
              non enim sit irure amet nisi culpa exercitation deserunt.
            </p>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}
erisleci commented 7 months ago

Have a look at this sandbox. I managed to fix this using the height of the device https://codesandbox.io/p/devbox/drawer-snap-points-forked-3xxclj?file=%2Fapp%2Fmy-drawer.tsx%3A33%2C10