Button onClick is not triggered within Dialogs

[Kinomej]

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

What version of that package are you using? 2.0.3

What browser are you using? Chrome

Reproduction URL https://codesandbox.io/p/devbox/dazzling-bouman-3xgdxv?file=%2Fsrc%2FButton.jsx%3A6%2C17

Describe your issue When opening multiple Dialogs (not nested), Buttons won't throw the onClick event when a button is clicked. I don't know if that happens in other cases too but this behaviour seems strange:

On the second layer of Dialogs (using a dialog stack), the click on a HeadlessUI Button: <Button onClick={() => {console.log('second modal close button clicked')}}> is not triggered. onMouseUp is working here but I would expect onClick to be handled the same way as everywhere. The onClick is working perfectly fine everywhere else in my application.

Normal buttons: <button onClick={...}> are working just fine.

I suspect it has something to do with 2 <Dialog> Components being rendered on the same Layer: <ModalStack> // rendered here <Dialog1/> <Dialog2/> </ModalStack>

But I cannot imagine why a Button would be concerned where its being rendered. I would expect the behaviour being normal wherever I use it.

[RobinMalfait]

Hey! Up until a recent change (#3242) sibling <Dialog /> components didn't work and we required them to be nested to determine which the most deeply nested <Dialog /> was that was opened. Not anymore, now they can be siblings and opened at the same time (last one wins).

This should be fixed by #3242, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.