headlessui
headlessui copied to clipboard
Button onClick is not triggered within Dialogs
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.