Command Palettes: Clicking near edges does not close modal

[jdlien]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/navigation/command-palettes
• Component name: Command Palette

Describe the bug
Clicking outside of the modal for a command palette should close the modal. However, if you click very near the edges of the DialogOverlay, nothing happens.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Command Palette page https://tailwindui.com/components/application-ui/navigation/command-palettes
2. Click on the outer edges (about 16px or less from the edge of any example).

Expected behavior
The modal dialog should transition out and disappear temporarily.

Browser/Device (if applicable)
Tested on Windows Chrome 101 and Firefox 100

Additional context
This problem also occurs on the headlessui.dev demo for modal dialogs, but does NOT occur in the TailwindUI modal example.

This is a usability problem because on mobile devices, this outer edge may be the only clickable area outside of the dialog, and that makes it difficult to close such dialogs.

[adamwathan]

Thanks for reporting — the reason for the current behavior is to prevent closing the dialog when the user clicks a scrollbar, because the browser doesn't give us any way to distinguish clicking a scrollbar from clicking the actual background. Super annoying but the example you gave makes sense and we'll see definitely look for a solution.

[jdlien]

Interesting that this is an affordance for scrolling, essentially. I think that typically (though certainly not always) the main page need not be scrolled while a modal is active. Still, do the top and left sides need this affordance since I don't think scrollbars ever go there. Perhaps this is not the case with RTL languages?

[adamwathan]

The main situation where scrolling comes up is when you need to scroll because the modal contents are taller than the viewport, like this Bootstrap example:

Untitled.mov

Headless UI needs to kinda work for all of these cases which is why that happens. Agree that it sucks to hurt the 90% use case to support the 10% use case though. I think we can find ways to improve it 👍

[jdlien]

Right, that's totally valid and important. I guess the way I was envisioning scrolling working in that case is that the scroll is inside the modal, but this is another way it could be implemented.

[reinink]

@jdlien Hey! Just a heads up that I think we've solved this issue in Headless UI (tailwindlabs/headlessui#1546), and should have that released soon 👍

[jdlien]

Thanks, Jonathan. It's so great to see Headless UI and your other products improving so rapidly. Thanks for taking my feedback seriously!