Modal overlay blocks access to vertical scrollbar

[dmarkow]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/overlays/modals#component-31555aec01de5027d6696629eb60f673
• Component name: Modal

Describe the bug
If a modal has more content than fits on the screen, you can scroll the modal up and down while the underlying content stays static (great!). However, at least on Windows, you can only scroll using the mouse scroll wheel or trackpad scrolling. The overlay in the example has inset-0 which effectively covers up and scrollbars that appear.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/tailwind-ui-forked-e9p0x?file=/src/index.js
2. Click "Open Modal"
3. Make sure the browser is sized so that the modal content has to scroll
4. Notice that the vertical scrollbar is covered by the overlay. You can scroll with a mouse wheel or trackpad, but clicking the actual scrollbar just closes the modal. (Note: on a mac, this is easier to see by changing System Preferences > General > Show scroll bars to "always")

Expected behavior
The scrollbar should be usable and shouldn't close the modal when you click it.

Screenshots

Browser/Device (if applicable)

• OS: macOS 11.5.1 and Windows 10
• Browser: Chrome/Edge
• Version: 92

Additional context
For now, I'm using top-0 left-0 bottom-0 right-4 instead of inset-0 on my overlay, but it has the downside of having a 16px gap even when there are no scrollbars visible.

@headlessui seems to have some logic where it sets the html element's right padding based on if scrollbars are present, I'm wondering if the Tailwind UI components need to do something similar with the overlay?

[reinink]

Thanks for reporting this @dmarkow. I am able to reproduce this issue, but haven't been able to find a solution yet. I'm going to do some more digging and will report back. 👍

[reinink]

Hey @dmarkow, another update here. We've spent a bunch of time working out the right solution to this problem, and it's unfortunately pretty complex. I'm pretty sure we know how to fix this now, but it's going to require some changed upstream in the Headless UI package. Because this is a bigger change, it might take a few weeks to get it implemented. I'm going to leave this issue open until that's been completed.

[dmarkow]

@reinink No worries, I appreciate any time spent on it! I have a workaround for now that's getting the job done.

[nourkilany]

@dmarkow If you don't mind me asking, whats your workaround. using overflow on the modal body ?

[dmarkow]

@nourkilany we added a right offset to the overlay (we ended up using a specific pixel size instead of a tailwind preset, I don't remember why at this point):

<Dialog.Overlay className="fixed inset-0 right-[17px] bg-black opacity-50" />

[reinink]

Okay, this has finally been fixed! 🥳

This ended up being a pretty tricky problem to solve, and actually required us making changes to the Headless UI dialog component. We've deprecated the <Dialog.Overlay> component and added a new <Dialog.Panel> component, and have updated all the modals in Tailwind UI to use this new component.

To upgrade your dialogs, please see the migration guide here: https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Fvue%40v1.6.0