[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.