PSA: don't forget to add type="button" to your <Dialog> trigger if a form wraps around it

[vincerubinetti]

I have a custom dialog component wrapper that looks something like this:

<>
  {/* children prop used as trigger. usually a button. */}
  {cloneElement(props.children, { onClick: open } )}
  <Dialog open={isOpen} onClose={close}>
    ...
    {/* content passed as prop */}
    {props.content}
  </Dialog>
</>

and in one case I have a <form> that wraps it. It is a popup feedback form that is triggered from a button floating in the corner of the screen.

Once I started wrapping the form around the <Dialog> component instead of inside the passed content prop (which I had to do for other reasons which I can elaborate on if needed), the first required field of the form would be automatically focused when the dialog was opened.

Took me a bit to realize what was happening: clicking the dialog trigger button (which didn't have a type="button" on it) was immediately trying to submit the form and thus the browser focused an invalid field preventing submission.

Side note: I also have a custom <form> wrapper component which automatically prevents automatic/implicit form submission -- e.g. from non-type="submit" buttons and from pressing enter on an <input>, etc. -- so I don't have to tediously put type="button" on all my app's countless buttons. But the logic occurs within the form's onSubmit event, and the browser auto-focuses the required field and doesn't even run the onSubmit event.

Anyway, this is solvable by just putting type="button" on the button.

Related:

bdd1b3b