Skip to content

Button onClick is not triggered within Dialogs #3229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Kinomej opened this issue May 22, 2024 · 1 comment
Closed

Button onClick is not triggered within Dialogs #3229

Kinomej opened this issue May 22, 2024 · 1 comment
Assignees

Comments

@Kinomej
Copy link

Kinomej commented May 22, 2024

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 RobinMalfait self-assigned this May 27, 2024
@RobinMalfait
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants