[bug]: Using Drawer with snap points

[hadnet]

Describe the bug

The Drawer component has a bug when trying to use it with the snapPoints, activeSnapPoint, and setActiveSnapPoint props. The Drawer isn’t visible, it doesn’t show up, even though it’s in the DOM. But when using the Drawer through the Vaul package, it works perfectly. I think it's something related to DrawerContent component.

Affected component/components

Drawer

How to reproduce

<Drawer
  modal={false}
  snapPoints={snapPoints}
  activeSnapPoint={snap}
  setActiveSnapPoint={setSnap}
>

Codesandbox/StackBlitz link

No response

Logs

System Info

Mac OS
Chrome
Shadcn/ui 0.0.4

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[SameerJS6]

@hadnet Can you provide the code of how you were using snapPoints with Drawer component

[SameerJS6]

@hadnet Usually, your first snapPoint value must be very low for the drawer to appear on the screen. Alternatively, for a simple fix, just add h-full to DrawerContent.

When the first snapPoint is set to 128px, it doesn’t show up.

20250308-1453-01.1432831.mp4

Changing it to a slightly higher value (In this case, 250px) fixes this issue.

20250308-1455-02.8627242.mp4

Same as the first, snapPoint is set to 128px but with h-full on DrawerContent

20250308-1504-46.2126010.mp4

If possible, it's better to use numbers/decimals for snapPoints

[hadnet]

@SameerJS6, after digging a little, I found that the problem is on line 36 https://github.com/shadcn-ui/ui/blob/12d4cf2ab0caefec5d6232e6c32220a8e62d73c4/apps/v4/registry/new-york-v4/ui/drawer.tsx#L61C145-L61C194

Specifically the data-[vaul-drawer-direction=bottom]:max-h-[80vh] part. If I remove it, everything works as Vaul intended. And you need to use a slightly higher value because of max-h-[80vh]. This needs to be fixed cause the way it's now is weird.

[SameerJS6]

@hadnet That's Interesting because I am not using the Drawer from v4. The normal Drawer doesn't have any max-h set; instead, it has h-auto. Hence, applying h-full works for me (and then manually defining a max-h of [95%]).

Anyway, it's good to see that in v4, they are accounting for styles for different directions, which wasn't the case for the normal Drawer before v4.

Before the v4 update: Drawer Content

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
        className
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))