[Bug]: Escape key in popover in dialogue closes dialog

[joshma]

What package within Headless UI are you using?

@headless/react

What version of that package are you using?

v1.4.1

What browser are you using?

Chrome

Reproduction repository

https://8hd53.csb.app/liveportal

Describe your issue

(I borrowed https://8hd53.csb.app/liveportal from #751 - I believe they may be related issues but am not sure.)

In the repro link, you can see that there's a Solutions popover inside the Payment successful dialog:

Hitting escape closes both the popover and the dialog, but I'd like escape to only close the popover. I believe that dialog inside dialog is handled:

https://github.com/tailwindlabs/headlessui/blob/main/packages/@headlessui-react/src/components/dialog/dialog.tsx#L223

But is there a way to extend this to other elements?

One example where this is useful: we have a dialog where, inside the dialogue, you can choose from a menu. Hitting escape on the menu currently closes the whole dialog.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed, and will be available in the next release.
You can already try it using npm install @headlessui/react@dev or yarn add @headlessui/react@dev.

[madebyfabian]

Same issue also exists for Vue, I tried out to install the newest @headlessui/vue@dev (0.0.0-aa1a48c), but the issue still persists. Do I have to do anything else to get the newest dev release?

[saurabhck12]

@RobinMalfait What exactly is the fix for this?