search

tailwindlabs / tailwindui-issues

A place to report bugs discovered in Tailwind UI.
236 stars 4 forks source link

Modal overlay blocks access to vertical scrollbar #696

Closed dmarkow closed 2 years ago

dmarkow commented 3 years ago

What component (if applicable)

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 CleanShot 2021-08-04 at 11 54 37@2x CleanShot 2021-08-04 at 11 56 19@2x

Browser/Device (if applicable)

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

nourkilany commented 2 years ago

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

dmarkow commented 2 years ago

@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 commented 2 years ago

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