Command palette overlay not tappable on iOS

[ajmueller]

What component (if applicable)

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

Describe the bug
When a command palette is open on iOS, it cannot be closed by tapping the overlay.

To Reproduce
Steps to reproduce the behavior:

1. Create a command palette from any of the examples
2. Open the command palette in Safari on iOS
3. Attempt to close the palette by tapping on the overlay

Expected behavior
Tapping on the overlay should close the palette.

Browser/Device (if applicable)

• OS: iOS
• Browser Safari
• Version 15

Solution
As far as I can tell, the solution is to modify two elements:

1. The first TransitionChild's child div should be a DialogOverlay.
2. The <div class="fixed inset-0 ... element that wraps the second TransitionChild should be a direct descendant of Dialog and wrap both TransitionChild components. That resolved it in my project.

[reinink]

@ajmueller Hey, sorry you bumped into this. This issue sounds similar to #1216.

In Headless UI v1.6 we fixed a bunch of dialog issues related to scrolling and the click-away-to-close behavior. We actually deprecated the <Dialog.Overlay /> component and introduced a new <Dialog.Panel> component instead.

If you haven't yet, I'd recommend using our latest implementation of the dialog component from Tailwind UI (which you can find here: https://tailwindui.com/components/application-ui/overlays/modals), and also making sure you're on the latest version of Headless UI.

I suspect that's going to fix your issues, but if it doesn't feel free to report back — ideally with a minimal reproduction for us to test with — and we'll have another look 👍

[reinink]

@ajmueller Hmm, just a follow up on this — I actually forgot that we bake the dialog right into the command palettes — so you don't even need to reference the modal components. Sorry for the confusion there.

Again, I'm hoping the issue here is simply that you're not on the latest version of Headless UI. If you are, then maybe there is a bug here, and a reproduction would be super helpful.

Thanks!