fix(drawer): prevent vaul pointer capture on native form elements (date picker, select)

[eduardbar]

Summary

Fixes native browser controls (date pickers, selects, contenteditable elements) not working inside Drawers on Chrome desktop.

Fixes #9578

Bug

When a user clicks on a native <input type="date"> (or <select>, or [contenteditable]) inside a Drawer, the native browser UI (e.g. the calendar popup for date inputs) never opens.

Root Cause

vaul's DrawerContent attaches an onPointerDown handler that calls element.setPointerCapture(event.pointerId) inside its onPress() logic. This captures all subsequent pointer events on the element, which means the browser never receives the pointer events it needs to open native UI (like the date picker calendar). The browser requires uninterrupted pointer ownership to show these native popups — once setPointerCapture is called, the native widget loses its chance to respond.

Fix

Wrap {children} in a display:contents div with an onPointerDown handler that calls e.stopPropagation() when the target is a native interactive element (input, textarea, select, or [contenteditable]). This stops the synthetic React event from bubbling up to vaul's handler, preventing setPointerCapture from firing for these elements.

<div
  className="contents"
  onPointerDown={(e) => {
    const target = e.target as HTMLElement
    if (target.closest("input, textarea, select, [contenteditable]")) {
      e.stopPropagation()
    }
  }}
>
  {children}
</div>

className="contents" uses CSS display: contents, which makes the div invisible to the layout engine — zero layout impact, no box is generated.

Files Changed

• apps/v4/registry/new-york-v4/ui/drawer.tsx
• apps/v4/registry/bases/base/ui/drawer.tsx
• apps/v4/registry/bases/radix/ui/drawer.tsx
• deprecated/www/registry/new-york/ui/drawer.tsx
• deprecated/www/registry/default/ui/drawer.tsx

[vercel]

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.