[AlertDialog] How to keep alert open for async functions?

[dheeraj-murali]

Hi,

I'm trying to create an alert dialog, to ask user a confirmation before updating some data in the server. I want the alert to stay open until the async call completes or fails.

Currently any click to the AlertDialog.Action or AlertDialog.Cancel is causing the Alert to close. Tried adding the open prop to the AlertDialog.Root. but still it closes regardless of the open prop value.

I did a work around by not using AlertDialog.Action and using a normal button instead, but It's doesn't feel right. What would be the best way to achieve this?

[benoitgrelard]

Hey @dheeraj-murali,

I have answered another question here which I think is similar to what you are asking.
Have a look at my reply here: #399 (comment) and let me know if it answers your question. If not, happy to continue the discussion here.

Thanks!

[jjenzz]

@dheeraj-murali I just had a go at this to make sure the open prop was still working correctly, and I think the missing part of your puzzle is that you need to add event.preventDefault() on the action click. All of our built in default behaviours can be prevented this way: https://codesandbox.io/s/condescending-stitch-9e0x0?file=/src/App.js

[...] using a normal button instead, but It's doesn't feel right.

Indeed... I would recommend always trying to use our parts because we may bind improved functionality/accessibility in future which you would lose out on if you used your own parts.

[dheeraj-murali]

Thanks @jjenzz, this worked.
I've only just started using Radix, and the work you guys have put into it is just amazing.

[mamlzy]

Thanks for helping me!