Unable to scroll

[sushanyadav]

I have a scrollable content inside Modal (Portal) which lives inside Drawer.

Link to reproduce:
https://stackblitz.com/edit/vitejs-vite-kizhhi

How to reproduce

• Go to the link above
• Click Open button
• Click Open Dialog button inside Drawer
• Try to scroll inside Dialog

Also on pressing "Esc" both drawer is being dismissed (expected to only dismiss modal if modal is active)

[joseph0926]

I think removing <Drawer.Overlay/> from App.jsx will fix the scrolling issue, is that correct?

[sushanyadav]

I think removing <Drawer.Overlay/> from App.jsx will fix the scrolling issue, is that correct?

Yes, it does. Thanks.
So in this case, should we manually create an overlay component if we need an overlay on drawer?

[joseph0926]

I think removing <Drawer.Overlay/> from App.jsx will fix the scrolling issue, is that correct?

Yes, it does. Thanks.
So in this case, should we manually create an overlay component if we need an overlay on drawer?

Looking at the documentation again, it looks like You don't need to remove the <Drawer.Overlay>, you just need to change the modal attribute to false on the <Drawer.Root>.

<Drawer.Root modal={false}>

---

Based on the code you've provided, I'd probably write something like this to accomplish your intention

<Drawer.Root modal={!isOpen} direction="right">