You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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.
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.
The text was updated successfully, but these errors were encountered: