Modal dialog with form workflow

Question

I have a discussion with colleagues about what is the correct dialog workflow. My scenario is:

1. Open dialog
2. Enter and validate data (disable submit button if data is invalid).
3. Submit the form to API.
4. Close dialog
5. Show toast message if error on API side.

What my colleague's offer is:

1. Open dialog.
2. Enter and validate data (disable submit button if data is invalid)
3. Submit data to API and keep the dialog open.
4. Show error toast (if any) while dialog open.
5. Close dialog.

Which solution supposes to be better from a UX perspective?

Answer 1

Closing the dialog after API submit

This has the benefit that the dialog closes as a user would expect when submitting a form. The drawback is that the user needs to enter all the data again if she gets an error from the API. Maybe you can mitigate this by saving the input data in this case.

Keeping the dialog open This has the advantage that you could also display inline errors after the API call has returned (e.g. "The submitted user does not exist. Enter a valid user."). It might be super annoying if the API call takes long and the UI is blocked for the user.

Personally, I would go with closing the dialog after submit.