[material-ui][Dialog] Compatibility between MUI's dialogs and React Hook Form with FormProvider

[michaelperrin]

Search keywords

React Hook Form FormProvider Dialog

Latest version

• I have tested the latest version

Summary

It is currently not possible to make use of React Hook Form context in Material UI dialogs as the <form> element is commonly encapsulated in a FormProvider component.
That FormProvider component is a context provider, and no style can be applied to is as a result.
This makes it impossible to pass a FormProvider instance to the component property on the PaperProps property of the MUI Dialog component.

ℹ️ That limitation is not restricted to the use of React Hook Form only, but to any use of context providers used as form parents.

Motivation

A MUI dialog can be configured to be used for forms, as described on Material UI's docs. Simple forms will work fine, but complex forms using React Hook Form with FormProvided can't be used.

Here's why 🙂

To put it in context, a dialog form has to encapsulate all the following children of the Dialog component:

• DialogTitle
• DialogContent
• DialogActions

This allows to get form fields (which are part of the DialogContent children) to be submitted when clicking on the submit button as a child of the DialogActions component.

To make it work, the parent Dialog component can be configured so that its inner Paper child can be configured to be rendered as a form element with some specific properties:

<Dialog
  // ...
  PaperProps={{
    component: 'form',
    onSubmit: (event) => {
      event.preventDefault();
      // ...
    },
  }}
>

And here is the limitation I am facing. Complex forms using React Hook Form commonly encapsulate the <form> element in a <FormProvider> component so that form children components can get access to React Hook Form's context (see FormProvider documentation):

<FormProvider {...methods}>
  // pass all methods into the context
  <form onSubmit={methods.handleSubmit(onSubmit)}>
    <NestedInput />
    // ...
  </form>
</FormProvider>

It is currently not possible to define this FormProvider as a parent of the form element when using forms in MUI's dialogs.

[mj12albert]

@michaelperrin I haven't used RHF recently but wouldn't this work?

<Dialog>
  <FormProvider> // or it could be placed even higher up?
    <form>
      <DialogTitle>
        A Title
      </DialogTitle>
      <DialogContent>
        <TextField />
      </DialogContent>
      // etc

[michaelperrin]

Thanks for your answer @mj12albert . That's the first approach I tried. And this wasn't working when using Material UI 6.0.1 due to scrolling issues inside the dialog (the dialog couldn't be scrolled if the form was long).
I then realized the scrolling issue was fixed when upgrading to Material UI 6.1.5. And it looks like it actually got fixed from version 6.1.0 👍

One of the remaining issues with this is that the whole dialog content (including header and footer) scrolls, but that's not the point of the issue I opened.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@michaelperrin How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.