Snappoints preventing drawer to render

[statusunknown418]

• the drawer is not rendering when snappoints is set
• demo:

Screen.Recording.2025-05-02.at.12.34.39.mov

• code:

const snapPoints = ['400px', 0.8];
const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);
...
{isMobile && (
        <Drawer
          setActiveSnapPoint={setSnap}
          activeSnapPoint={snap}
          snapPoints={snapPoints}
          modal={false}
          dismissible={false}
          defaultOpen
          handleOnly
        >
          <DrawerTrigger asChild>
            <Button>Open</Button>
          </DrawerTrigger>

          <DrawerContent>
            <Handle />
            <DrawerHeader>
              <DrawerTitle>Sign In</DrawerTitle>
            </DrawerHeader>

            <section>Something</section>
          </DrawerContent>
        </Drawer>
      )}

[mattiaz9]

I noticed that when the drawer content is too small it's not working properly.

I took the same example code from this page: https://vaul.emilkowal.ski/snap-points#snap-to-sequential-points and removed the bottom content of the drawer and replaced h-full with h-auto, then it stopped working:

"use client"

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

const snapPoints = ["148px", "355px", 1]

export default function VaulDrawer() {
  const [snap, setSnap] = useState<number | string | null>(snapPoints[0])

  return (
    <Drawer.Root
      snapPoints={snapPoints}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      snapToSequentialPoint
    >
      <Drawer.Trigger className="relative flex h-10 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-full bg-white px-4 text-sm font-medium shadow-sm transition-all hover:bg-[#FAFAFA] dark:bg-[#161615] dark:text-white dark:hover:bg-[#1A1A19]">
        Open Drawer
      </Drawer.Trigger>
      <Drawer.Overlay className="fixed inset-0 bg-black/40" />
      <Drawer.Portal>
        <Drawer.Content
          data-testid="content"
          className="border-b-none fixed bottom-0 left-0 right-0 mx-[-1px] flex h-auto max-h-[97%] flex-col rounded-t-[10px] border border-gray-200 bg-white"
        >
          <div
            className={clsx("mx-auto flex w-full max-w-md flex-col p-4 pt-5", {
              "overflow-y-auto": snap === 1,
              "overflow-hidden": snap !== 1,
            })}
          >
            <div className="flex items-center">
              <svg
                className="h-5 w-5 flex-shrink-0 text-yellow-400"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fillRule="evenodd"
                  d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
                  clipRule="evenodd"
                ></path>
              </svg>
              <svg
                className="h-5 w-5 flex-shrink-0 text-yellow-400"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fillRule="evenodd"
                  d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
                  clipRule="evenodd"
                ></path>
              </svg>
              <svg
                className="h-5 w-5 flex-shrink-0 text-yellow-400"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fillRule="evenodd"
                  d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
                  clipRule="evenodd"
                ></path>
              </svg>
              <svg
                className="h-5 w-5 flex-shrink-0 text-yellow-400"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fillRule="evenodd"
                  d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
                  clipRule="evenodd"
                ></path>
              </svg>
              <svg
                className="h-5 w-5 flex-shrink-0 text-gray-300"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fillRule="evenodd"
                  d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
                  clipRule="evenodd"
                ></path>
              </svg>
            </div>
            <Drawer.Title className="mt-2 text-2xl font-medium text-gray-900">
              The Hidden Details
            </Drawer.Title>
            <p className="mb-6 mt-1 text-sm text-gray-600">2 modules, 27 hours of video</p>
            <p className="text-gray-600">
              The world of user interface design is an intricate landscape filled with hidden
              details and nuance. In this course, you will learn something cool. To the untrained
              eye, a beautifully designed UI.
            </p>
            <button className="mt-8 h-[48px] flex-shrink-0 rounded-md bg-black font-medium text-gray-50">
              Buy for $199
            </button>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  )
}

[chunchunmaru0]

You can try this:

              <Drawer.Content
                className={clsx("h-[-webkit-fill-available]", {
                  "h-[96%]": snap === 1,
                })}
              >

This will render the content even if the content isn't big enough.

[kzroo]

I have the same issue. My drawer's placement is on the left side of the screen. If I add snappoint behavior, the drawer stops rendering. As soon as I remove snappoint behavior, the drawer renders again.

You can try this:

          <Drawer.Content
            className={clsx("h-[-webkit-fill-available]", {
              "h-[96%]": snap === 1,
            })}
          >

This will render the content even if the content isn't big enough.

this didn't work for me.

Edit:

My drawer renders for direction="right", but does not render for direction="left" (with snappoints -- without snappoints it renders fine). My snappoints are ['80px', '300px']... This is strange.

Render is actually not the right word, but rather the drawer is not visible on screen. (It is in the DOM).

Edit2:

discovered that if I set "right:0; top:0; fixed" (to drawer.content className) for direction=left of the drawer.root, the drawer is visible (with snappoints).

And if direction=right, then it needs to be "left:0; top:0; fixed"

And then the drawer upon initial load flys across the screen to its correct position Lol.

    <Drawer.Root snapPoints={snapPoints} 
                           activeSnapPoint={snap} 
                           setActiveSnapPoint={setSnap} 
                           direction="left" 
                           modal={false} 
                           defaultOpen>
      <Drawer.Portal>
        <Drawer.Content
          className="right-0 top-0 fixed z-40 outline-none w-[300px] flex bg-white shadow-sm"
        >
          <div className="h-full w-full grow p-5 flex flex-col">
            <div className="max-w-md mx-auto">
              <Drawer.Title className="font-medium mb-2 text-zinc-900">It supports all directions.</Drawer.Title>
              <Drawer.Description className="text-zinc-600 mb-2">
                Testing 123
              </Drawer.Description>
            </div>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>

Seems like there's some weird rendering logic going on with snappoints. I'm going to dig into this further.

[kzroo]

This is what ended up working for me:

const snapPoints = ["80px", "300px"];

export default function VaulDrawer() {
  const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);

  return (
    <Drawer.Root
      snapPoints={snapPoints}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      dismissible={false}
      direction="left"
      modal={false}
      repositionInputs={false}
      defaultOpen={true}
    >
      <Drawer.Overlay className="fixed inset-0 bg-black/40" />
      <Drawer.Portal>
        <Drawer.Content className="fixed flex justify-end bg-white border border-gray-200 border-b-none rounded-t-[10px] bottom-0 left-0 right-0 h-full max-h-[97%] -mx-3">
          <div
            className={clsx("flex flex-col w-[300px] p-4 pt-5", {
              "overflow-y-auto": snap === "300px",
              "overflow-hidden": snap !== "300px",
            })}
          >
            <Drawer.Title className="text-2xl mt-2 font-medium text-gray-900">
              The Hidden Test
            </Drawer.Title>

            <div className="mt-2">
              Testing 123
            </div>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Drawer renders, no position issues.
If you want to open the drawer programmatically, you need to call the setSnap function. e.g. setSnap('300px')

[simonmaass]

i am also having a lot of problem with the snappoints...