How should you use the Dialog as a form?

[csenio]

I'm trying to use the Dialog as a form where the Action submits the form. Somewhat like this:

The problem is that Action dismisses the Dialog by default. I kind of got around this by making the form controlled like this:

export default function CreateReview({children, restaurantSlug}) {
  const [isOpen, setIsOpen] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

  function handleSubmit(e) {
    e.preventDefault()
    setIsSubmitting(true)
    ...
  }
  // isSubmitting blocks the modal from closing
  return (
    <Root open={isSubmitting || isOpen} onOpenChange={setIsOpen}>
      <Trigger>
        Leave a Review
      </Trigger>

      <Overlay />
      <Content>
        <form onSubmit={handleSubmit}>
             ...
            <Action type="submit"  disabled={isSubmitting}>...</Action>
        </form>
      </Content>
    </Root>
  )
}

This works well-ish but fails for example when one of the fields is required and not filled out (as handleSubmit is never called). I could hack around this in a couple of ways (like just using a button instead of Action) but since this seemed like a fairly common use case I wanted to check if there's a smarter / intended way of achieving this.

[benoitgrelard]

Hi @jescowuester,

If you're using Action I am guessing that your are using AlertDialog and not Dialog right?

If so, my first feedback seeing the image above would be that it's probably the wrong component for your use case.
AlertDialog should be used basically for things like user confirmation when a destructive action is about to happen, thinks like discard changes, etc. So you probably want to use Dialog instead here.

Secondly can you help me understand what you are trying to achieve?

• Are you trying to submit the form but leave the Dialog open? (if so, how would the user close it?)
• Are you wanting to submit it and asynchronously wait for the submission to happen and then close it?

I'm not super clear on the use case so that would help.

Regardless, if you only wanted a submit button which had nothing to do with your Dialog, ie. didn't need to close it, then it's completely valid to use a standard button for that. Dialog.Close is merely here as a convenience to automate the common use case of wanting to have a button to close the Dialog and have it all work without having to control the open state necessarily.

[kylemh]

Are you wanting to submit it and asynchronously wait for the submission to happen and then close it?

How might one accomplish this with Dialog.Close? Would I be forced to control open state?

[andy-hook]

How might one accomplish this with Dialog.Close? Would I be forced to control open state?

@kylemh yes exactly, you'll need to control and set open={false} on resolution. As mentioned, Dialog.Close is primarily for convenience when controlling is not required.