search

emilkowalski / vaul

A drawer component for React.
https://vaul.emilkowal.ski
MIT License
6.45k stars 215 forks source link

Controlled usage with modal={false} incorrectly adds pointer-events: none to body #509

Open andrewn opened 1 week ago

andrewn commented 1 week ago

I'm trying to use a controlled Drawer:

<Drawer.Root
  open={open}
  onOpenChange={onOpenChange}
  direction="right"
  modal={false}
 >...</Drawer.Root>

Actual behaviour

When I open the Drawer by toggling the open prop, pointer-events: none is added to the body. This means anything outside the Drawer isn't clickable.

Opening/closing via Drawer.Trigger works as expected, without block body pointer-events.

Expected behaviour

When modal={false} I'd expect to be able to interact with the rest of the document outside of the Drawer when it's open.

Test case

Here's some code showing the issue on Replit.

NicHaley commented 1 week ago

A dup of https://github.com/emilkowalski/vaul/issues/492