From 1bf447bb354a654a32b897ef6bf44c76bde10db4 Mon Sep 17 00:00:00 2001
From: TEDESCO Florent <florent.tedesco@agrosupdijon.fr>
Date: Tue, 29 Mar 2022 08:06:15 +0200
Subject: [PATCH] Fixed bug related to using state around the Form's component

---
 package.json             |  2 +-
 src/components/Form.js   | 32 +++++++++++++++++++++++---------
 src/wrappers/withForm.js |  4 +---
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 29aa20b..e2c0a9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-hook-form-material-ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "This package is a simple bridge between react-hook-form and material-ui",
   "author": "BigChicChicken",
   "license": "MIT",
diff --git a/src/components/Form.js b/src/components/Form.js
index c479962..2530dea 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -5,7 +5,7 @@ import withForm from '../wrappers/withForm'
 
 class Form extends Component {
   render() {
-    const { onSubmit, form, children } = this.props
+    const { form, onSubmit, children } = this.props
 
     return (
       <FormProvider {...form}>
@@ -15,12 +15,28 @@ class Form extends Component {
   }
 }
 
-const FormComponent = React.forwardRef(({ parameters, ...props }, ref) =>
-  React.createElement(withForm(Form, parameters), {
-    ref,
-    ...props
-  })
-)
+const FormWrapper = class extends Component {
+  constructor(props) {
+    super(props)
+
+    this.Component = withForm(props.parameters)(Form)
+  }
+
+  render() {
+    const { parameters, innerRef, ...props } = this.props
+
+    return React.createElement(this.Component, {
+      ref: innerRef,
+      ...props
+    })
+  }
+}
+
+const FormComponent = React.forwardRef((props, ref) => (
+  <FormWrapper innerRef={ref} {...props} />
+))
+
+FormComponent.displayName = 'FormWrapper'
 
 FormComponent.propTypes = {
   onSubmit: PropTypes.func,
@@ -32,6 +48,4 @@ FormComponent.defaultProps = {
   parameters: {}
 }
 
-FormComponent.displayName = 'Form'
-
 export default FormComponent
diff --git a/src/wrappers/withForm.js b/src/wrappers/withForm.js
index 56c793e..a8b92b3 100644
--- a/src/wrappers/withForm.js
+++ b/src/wrappers/withForm.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 
-function withForm(Component, parameters = {}) {
+export default (parameters) => (Component) => {
   const componentName = Component.displayName || Component.name || 'Component'
 
   const render = (props, ref) => {
@@ -16,5 +16,3 @@ function withForm(Component, parameters = {}) {
 
   return hoistNonReactStatics(WithForm, Component)
 }
-
-export default withForm