Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Alert dialog closes before asynchronous form submission
See original GitHub issueBug report
Current Behavior
When using <AlertDialog.Action> on form submission, the alert dialog is unmounted immediately instead of on setOpen(false). This results in the following warning in the console:
Form submission canceled because the form is not connected
Expected behavior
The alert dialog remains open until setOpen(false) runs after the promise resolves
Reproducible example
Additional context
The code in the reproducible example was derived from the documentation
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | @radix-ui/react-alert-dialog | 1.0.2 |
| React | n/a | 18.2.0 |
| Browser | Chrome | 107.0.5304.107 |
| Assistive tech | ||
| Node | n/a | |
| npm/yarn | npm | 8.5.0 |
| Operating System | Windows 10 | 21H1 |
Issue Analytics
- State:
- Created 10 months ago
- Comments:6
Top Results From Across the Web
Javascript popup closing event with asynchronous call
How to make to display the alert only after closing the popup .? I added alert("s"); after the close event , in that...
Read more >Alert Dialog - Radix UI
Close after asynchronous form submission. Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.
Read more >Mat Dialog: beforeClosed() should have an option to cancel
The perfect solution would be adding BeforeClosing method which will have Cancel as one of its parameters to prevent the dialog closing. 8...
Read more >Dialog | Angular Material
Gets an observable that is notified when the dialog is finished closing. Returns. Observable<R | undefined>. afterOpened. Gets ...
Read more >HTMLDialogElement.close() - Web APIs - MDN Web Docs
A form submission closes the <dialog> it is nested within if the form's method is dialog , so no "close" button is required....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@andy-hook exactly, I’m going to update the examples today as it’s a few people who have noted it’s not working correctly 👍
https://github.com/radix-ui/website/pull/544