Dismissing a Radix Dialog after a form submission

Learn how to turn our Radix Dialog into a controlled component so that it can be dismissed after a form submission, and use CSS to add mount and unmount animations.

This is Part 2 of a series in collaboration with WorkOS.
Part 2: Dismissing a Radix Dialog after a form submission

🔗 LINKS

🕐 TIMESTAMPS
0:00 - Intro
1:56 - Wiring up the form with updateContact
4:44 - Dismissing the dialog after submission
6:54 - Adding pending UI
10:27 - Resetting the form's state after submission
14:17 - Animating the dialog with CSS
17:42 - Outro

[personcalledjames]

That little trick with `fieldset` and `group` is very very cool - I'll definitely need to keep a note of that. Thanks :)

[joshdotmp]

Great tutorial, very informative! Even more impressed with your code editing skills, probably the fastest I've ever seen in a tutorial and keeps everything moving fast and not wasting any time. The folding, multiple cursors, using abbreviations for autocomplete, etc. is on another level. I'm kind of medium skill with Vim bindings, and I would love to know your tips for moving as fast as you do!

[kakun]

oh wow i was just facing this issue where the form data was not resetting even after I closed the dialog and i was wondering why and right then i came across your video thank you so much much love! really loved the tips from your tailwind conf too!

[talhazaryab]

Just watched your course on egghead. Really inspired by your teaching style. Your skills are amazing. I wish to become like you someday.
Thanks for another upload.

[deniyii]

Man your content is so consistently high quality!

[IkraamDev]

Being watching your videos for years now. Keep it up!

[ThugLifeModafocah]

Your content is priceless. Thank you very much.

[codegusoficial]

Thanks, the tip for dismiss the dialog helped a lot!

[pheisar]

Bang! Another quality upload! At this rate, I gotta buy some quality proof armor because I'm being overwhelmed here. Thanks, Sam!

[roguesherlock]

fieldset bit was pretty neat sam. Overall really loved the video and it's pacing.

[choudhureee]

Woah.. Didn't know about the event.currenttarget trick for form events. Also, your vim chops are buttery smooth.

[DEV_XO]

More Radix / Framer content please! Thank you! ❤

[vinsonwei]

Wow, didn't know you could retrive form data just like that. Great tip.

[ramsayromero]

Great video! loved the fieldset and the button spinner trick! So simple! I feel like an idiot for using getBoundingClientRect to measure my button and correctly place the spinner without the button size changing lol

[undefined_null]

Awesome content as usual 🤝.
I'm curious on how you select multiple occurrences of the word content at 17:12 while using vim motions.
Also it would be helpful if you could make a short videos about all your vim motions/shortcuts that you use regularly inside vs-code.

[javiermadueno]

Greate video! As always. I think this could be the perfect scenario where XState can be used.

[rajaryyn]

Hey, please upload your video daily i really like it

[wfl-junior]

I've been using Framer Motion for animation dialogs, had no idea radix had support for unmounting animations out of the box xD

[pedromiranda]

I wish I'd learned about this disabled fieldset trick before. Great content!

By the way is that Dracula Pro or some custom theme that I just can't seem to find? 😅

[carlosraul]

wow you are impressive, everything I have imagined you have been able to do with React, Tailwind and Framer motion, but are you capable of creating a slider menu ?, like the WhatsApp sliders menus
I tried, but I fail miserably hahah