Added initialValuesEqual predicate prop to Form (#343)

Author: erikras

README.md

@@ -195,6 +195,7 @@ const MyForm = () => (
     - [`debug?: DebugFunction`](#debug-debugfunction)
     - [`decorators?: Decorator[]`](#decorators-decorator)
     - [`initialValues?: Object`](#initialvalues-object)
+    - [`initialValuesEqual?: (?Object, ?Object) => boolean`](#initialvaluesequal-object-object--boolean)
     - [`keepDirtyOnReinitialize?: boolean`](#keepdirtyonreinitialize-boolean)
     - [`mutators?: { [string]: Mutator }`](#mutators--string-mutator-)
     - [`onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void`](#onsubmit-values-object-form-formapi-callback-errors-object--void--object--promiseobject--void)
@@ -638,6 +639,10 @@ to apply to the form.
 
 [See the 🏁 Final Form docs on `initialValues`](https://github.com/final-form/final-form#initialvalues-object).
 
+#### `initialValuesEqual?: (?Object, ?Object) => boolean`
+
+A predicate to determine whether or not the `initialValues` prop has changed. Useful for passing in a "deep equals" function if you need to. Defaults to "shallow equals".
+
 #### `keepDirtyOnReinitialize?: boolean`
 
 [See the 🏁 Final Form docs on `keepDirtyOnReinitialize`](https://github.com/final-form/final-form##keepdirtyonreinitialize-boolean).

package.json

@@ -45,6 +45,7 @@
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.10.0",
+    "fast-deep-equal": "^2.0.1",
     "final-form": "^4.8.3",
     "flow-bin": "^0.75.0",
     "glow": "^1.2.2",

src/ReactFinalForm.js

@@ -144,7 +144,10 @@ class ReactFinalForm extends React.Component<Props, State> {
     }
     if (
       this.props.initialValues &&
-      !shallowEqual(prevProps.initialValues, this.props.initialValues)
+      !(this.props.initialValuesEqual || shallowEqual)(
+        prevProps.initialValues,
+        this.props.initialValues
+      )
     ) {
       this.form.initialize(this.props.initialValues)
     }

src/ReactFinalForm.test.js

@@ -3,6 +3,7 @@ import ReactDOMServer from 'react-dom/server'
 import TestUtils from 'react-dom/test-utils'
 import Form from './ReactFinalForm'
 import Field from './Field'
+import deepEqual from 'fast-deep-equal'
 
 const onSubmitMock = values => {}
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
@@ -224,6 +225,7 @@ describe('ReactFinalForm', () => {
     TestUtils.Simulate.submit(form)
     expect(onSubmit).toHaveBeenCalled()
   })
+
   it('should reinitialize when initialValues prop changes', () => {
     const renderInput = jest.fn(({ input }) => <input {...input} />)
     class Container extends React.Component {
@@ -260,25 +262,68 @@ describe('ReactFinalForm', () => {
     expect(renderInput).toHaveBeenCalledTimes(3)
     expect(renderInput.mock.calls[2][0].input.value).toBe('bar')
   })
-  it('should not reinitialize if initialValues prop is shallow equal', () => {
+
+  it('should reinitialize when initialValues prop changes, deeply', () => {
+    const renderInput = jest.fn(({ input }) => <input {...input} />)
+    class Container extends React.Component {
+      state = { initValues: { foo: { bar: 'baz' } } }
+      render() {
+        return (
+          <Form
+            onSubmit={onSubmitMock}
+            subscription={{ dirty: true }}
+            initialValues={this.state.initValues}
+          >
+            {() => (
+              <form>
+                <Field name="foo.bar" render={renderInput} />
+                <button
+                  type="button"
+                  onClick={() =>
+                    this.setState({ initValues: { foo: { bar: 'baq' } } })
+                  }
+                >
+                  Initialize
+                </button>
+              </form>
+            )}
+          </Form>
+        )
+      }
+    }
+    const dom = TestUtils.renderIntoDocument(<Container />)
+    expect(renderInput).toHaveBeenCalled()
+    expect(renderInput).toHaveBeenCalledTimes(1)
+    const init = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
+    TestUtils.Simulate.click(init)
+
+    // once to change prop and again after reinitialization
+    expect(renderInput).toHaveBeenCalledTimes(3)
+    expect(renderInput.mock.calls[2][0].input.value).toBe('baq')
+  })
+
+  it('should not reinitialize if initialValues prop is deep equal', () => {
     const renderInput = jest.fn(({ input }) => <input {...input} />)
     const lastRenderInputCall = () =>
       renderInput.mock.calls[renderInput.mock.calls.length - 1]
     class Container extends React.Component {
-      state = { initValues: { foo: 'bar' } }
+      state = { initValues: { foo: { bar: 'baz' } } }
       render() {
         return (
           <Form
             onSubmit={onSubmitMock}
             subscription={{ dirty: true }}
             initialValues={this.state.initValues}
+            initialValuesEqual={deepEqual}
           >
             {() => (
               <form>
-                <Field name="foo" render={renderInput} />
+                <Field name="foo.bar" render={renderInput} />
                 <button
                   type="button"
-                  onClick={() => this.setState({ initValues: { foo: 'bar' } })}
+                  onClick={() =>
+                    this.setState({ initValues: { foo: { bar: 'baz' } } })
+                  }
                 >
                   Initialize
                 </button>
@@ -300,6 +345,7 @@ describe('ReactFinalForm', () => {
     const numCalls = renderInput.mock.calls.length
     expect(renderInput.mock.calls[numCalls - 1][0].input.value).toBe('bar!')
   })
+
   it('should respect keepDirtyOnReinitialize prop when initialValues prop changes', () => {
     const renderInput = jest.fn(({ input }) => <input {...input} />)
     class Container extends React.Component {

src/index.d.ts

@@ -71,6 +71,7 @@ export interface RenderableProps<T> {
 export interface FormProps extends Config, RenderableProps<FormRenderProps> {
   subscription?: FormSubscription
   decorators?: Decorator[]
+  initialValuesEqual?: (a?: object, b?: object) => boolean
 }
 
 export interface FieldProps extends RenderableProps<FieldRenderProps> {

src/types.js.flow

@@ -72,7 +72,8 @@ export type RenderableProps<T> = {
 
 export type FormProps = {
   subscription?: FormSubscription,
-  decorators?: Decorator[]
+  decorators?: Decorator[],
+  initialValuesEqual?: (?Object, ?Object) => boolean
 } & Config &
   RenderableProps<FormRenderProps>
 
@@ -88,8 +89,8 @@ export type FieldProps = {
   validateFields?: string[],
   value?: any
 } & RenderableProps<FieldRenderProps> & {
-  component?: React.ComponentType<*> | SupportedInputs
-}
+    component?: React.ComponentType<*> | SupportedInputs
+  }
 
 export type FormSpyProps = {
   onChange?: (formState: FormState) => void,