headlessui: 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.