Merge pull request #26 from vtex/fix/first-render-change

Prevents onChange trigger on first render

Author: alcar

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0-beta.13] - 2020-03-26
+
+### Fixed
+
+- Prevent `onChange` from being triggered during the initial render.
+
 ## [0.2.0-beta.12] - 2020-03-20
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-form-jsonschema",
-  "version": "0.2.0-beta.12",
+  "version": "0.2.0-beta.13",
   "description": "Wrapper arround react-hook-form to create forms from a JSON schema.",
   "main": "output/index.cjs.js",
   "module": "output/index.esm.js",

src/components/FormContext.tsx

@@ -35,8 +35,14 @@ export const FormContext: FC<FormContextProps> = props => {
     submitFocusError: submitFocusError,
   })
 
+  const isFirstRender = React.useRef(true)
+
   if (typeof onChange === 'function') {
-    onChange(getObjectFromForm(props.schema, methods.watch()))
+    const watchedInputs = methods.watch()
+
+    if (isFirstRender.current === false) {
+      onChange(getObjectFromForm(props.schema, watchedInputs))
+    }
   }
 
   const idMap = useMemo(() => getIdSchemaPairs(props.schema), [props.schema])
@@ -72,6 +78,10 @@ export const FormContext: FC<FormContextProps> = props => {
     formProps.noValidate = props.noNativeValidate
   }
 
+  if (isFirstRender.current === true) {
+    isFirstRender.current = false
+  }
+
   return (
     <InternalFormContext.Provider value={formContext}>
       <form {...formProps}>{props.children}</form>

src/components/__mocks__/mockSchema.ts

@@ -0,0 +1,25 @@
+const mockSchema = {
+  $id: 'https://example.com/mock.schema.json',
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'Mock',
+  type: 'object',
+  properties: {
+    firstField: {
+      type: 'string',
+      description: 'The first field.',
+      title: 'First field',
+    },
+    secondField: {
+      type: 'string',
+      description: 'The second field.',
+      title: 'Second field',
+    },
+    thirdField: {
+      type: 'string',
+      description: 'The third field.',
+      title: 'Third field',
+    },
+  },
+}
+
+export default mockSchema

src/components/__tests__/FormContext.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render } from '@vtex/test-tools/react'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+
+import { useObject } from '../../hooks/useObject'
+import mockSchema from '../__mocks__/mockSchema'
+import { FormContext } from '../FormContext'
+
+const ObjectRenderer = (props: { pointer: string }) => {
+  const fields = useObject({ pointer: props.pointer })
+
+  return (
+    <>
+      {fields.map(field => {
+        const fieldJsonSchema = field.getObject()
+
+        return (
+          <Controller
+            as={<input aria-label={fieldJsonSchema.title} name={field.name} />}
+            control={field.formContext.control}
+            defaultValue=""
+            key={field.pointer}
+            name={field.pointer}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+test('should call onChange when something changes', () => {
+  const changeHandlerMock = jest.fn()
+
+  const { getByLabelText } = render(
+    <FormContext onChange={changeHandlerMock} schema={mockSchema}>
+      <ObjectRenderer pointer="#" />
+    </FormContext>
+  )
+
+  expect(changeHandlerMock).toHaveBeenCalledTimes(0)
+
+  let changeValue
+
+  Object.entries(mockSchema.properties).forEach(
+    ([fieldName, fieldProperties], index) => {
+      const fieldNumber = index + 1
+
+      const inputElement = getByLabelText(fieldProperties.title)
+
+      const fieldNewValue = `new value for field ${fieldNumber}`
+
+      fireEvent.change(inputElement, {
+        target: { value: fieldNewValue },
+      })
+
+      expect(changeHandlerMock).toHaveBeenCalledTimes(fieldNumber)
+
+      changeValue = { ...changeValue, [fieldName]: fieldNewValue }
+
+      expect(changeHandlerMock).toHaveBeenLastCalledWith(changeValue)
+    }
+  )
+})