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>
);
}
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)