Fixed destroyOnUnregister bug (#537)

* Fixed destroyOnUnregister bug

* Made work with fields added after original render

Author: erikras

package-lock.json

@@ -62,7 +62,7 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "^1.6.0",
     "fast-deep-equal": "^2.0.1",
-    "final-form": "^4.15.0",
+    "final-form": "^4.16.0",
     "flow-bin": "^0.98.1",
     "glow": "^1.2.2",
     "husky": "^2.4.1",
@@ -89,7 +89,7 @@
     "typescript": "^3.5.2"
   },
   "peerDependencies": {
-    "final-form": "^4.15.0",
+    "final-form": "^4.16.0",
     "react": "^16.8.0"
   },
   "lint-staged": {

package.json

@@ -134,7 +134,7 @@ function ReactFinalForm<FormValues: FormValuesShape>({
     form.setConfig('debug', debug)
   })
   useWhenValueChanges(destroyOnUnregister, () => {
-    form.setConfig('destroyOnUnregister', destroyOnUnregister)
+    form.destroyOnUnregister = !!destroyOnUnregister
   })
   useWhenValueChanges(
     initialValues,

src/ReactFinalForm.js

@@ -940,4 +940,65 @@ describe('ReactFinalForm', () => {
     expect(formMock.mock.calls[1][0]).toBe('name')
     expect(formMock.mock.calls[1][2].active).toBe(true) // default subscription
   })
+
+  it('should not destroy on unregister on initial unregister', () => {
+    // https://github.com/final-form/react-final-form/issues/523
+    const { getByTestId } = render(
+      <Form
+        onSubmit={onSubmitMock}
+        initialValues={{ name: 'erikras' }}
+        destroyOnUnregister
+      >
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <Field name="name" component="input" data-testid="name" />
+          </form>
+        )}
+      </Form>
+    )
+
+    expect(getByTestId('name')).toBeDefined()
+    expect(getByTestId('name').value).toBe('erikras')
+    fireEvent.focus(getByTestId('name'))
+    expect(getByTestId('name').value).toBe('erikras')
+  })
+
+  it('should not destroy on unregister on initial register/unregister of new field', () => {
+    // https://github.com/final-form/react-final-form/issues/523
+    const { getByTestId, queryByTestId, getByText } = render(
+      <Form
+        onSubmit={onSubmitMock}
+        initialValues={{ name: 'erikras', password: 'f1nal-f0rm-RULEZ' }}
+        destroyOnUnregister
+      >
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <Field name="name" component="input" data-testid="name" />
+            <Toggle>
+              {showPassword =>
+                showPassword && (
+                  <Field
+                    name="password"
+                    component="input"
+                    type="password"
+                    data-testid="password"
+                  />
+                )
+              }
+            </Toggle>
+          </form>
+        )}
+      </Form>
+    )
+
+    expect(getByTestId('name')).toBeDefined()
+    expect(getByTestId('name').value).toBe('erikras')
+    fireEvent.focus(getByTestId('name'))
+    expect(getByTestId('name').value).toBe('erikras')
+    expect(queryByTestId('password')).toBe(null)
+    fireEvent.click(getByText('Toggle'))
+    expect(getByTestId('password').value).toBe('f1nal-f0rm-RULEZ')
+    fireEvent.focus(getByTestId('password'))
+    expect(getByTestId('password').value).toBe('f1nal-f0rm-RULEZ')
+  })
 })

src/ReactFinalForm.test.js

@@ -72,15 +72,22 @@ function useField<FormValues: FormValuesShape>(
   const firstRender = React.useRef(true)
 
   // synchronously register and unregister to query field state for our subscription on first render
-  const [state, setState] = React.useState<FieldState>(
-    (): FieldState => {
-      let initialState: FieldState = {}
-      register(state => {
-        initialState = state
-      })()
-      return initialState
-    }
-  )
+  const [state, setState] = React.useState<FieldState>((): FieldState => {
+    let initialState: FieldState = {}
+
+    // temporarily disable destroyOnUnregister
+    const destroyOnUnregister = form.destroyOnUnregister
+    form.destroyOnUnregister = false
+
+    register(state => {
+      initialState = state
+    })()
+
+    // return destroyOnUnregister to its original value
+    form.destroyOnUnregister = destroyOnUnregister
+
+    return initialState
+  })
 
   React.useEffect(
     () =>