Using Dialog and Menu together: prompting user for confirmation from context menu fails to trigger onClick

What package within Headless UI are you using? @headlessui/react

What version of that package are you using? 1.4.3

What browser are you using? Google Chrome Version 98.0.4758.80 (Official Build) (x86_64)

Reproduction URL https://codesandbox.io/s/confirm-dialog-in-context-menu-rryfbw?file=/pages/index.js

Note: Expected behavior of the above is that it should trigger a browser alert when you click Delete -> Confirm. It may work the first time. Please try multiple times, as the error behavior is intermittent.

Describe your issue When nesting a Dialog in a Menu, it appears that certain onClick events only fire sometimes, or there is otherwise odd behavior in handling click events when nesting a Dialog in a Menu.

I have a simple use case of having a delete button within a context menu (Menu). The delete button is wrapped in a custom component I call Confirm, that opens a Dialog and prompts the user to confirm the action (e.g. “Are you sure you want to delete that?”). The onClick handler of the “Confirm” appears to fire intermittently. I haven’t had much luck discerning whether or not it is firing but not being handled, or not firing at all.

[RobinMalfait]

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

Can you update the reproduction url to get it into a “working” / debuggable state? Currently when I load it (https://rryfbw.sse.codesandbox.io) I see:

[RobinMalfait]

@bollingerdorian not sure, but that doesn’t sound like an ideal solution to me 🤔. I wonder if it makes more sense to only have 1 Dialog per kind (e.g.: confirmation dialog) and swap out the contents with the correct data based on the item you want to remove.