fix: fix blur/change behavior again

README.md

@@ -28,10 +28,6 @@ after it.
 
 Demo CodeSandbox: https://codesandbox.io/s/react-final-form-graceful-field-example-n1onw?file=/src/index.js
 
-# Bundle size note
-
-You might be alarmed that this depends on `lodash`, but it only imports `lodash/get`, so with webpack or rollup tree shaking it will not weigh much.
-
 # Important
 
 **Important**: `react-final-form-graceful-field` requires you to use the [`setFieldData` mutator](https://github.com/final-form/final-form-set-field-data) on your form:

package.json

@@ -147,7 +147,6 @@
  "dependencies": {
  "@babel/runtime": "^7.1.5",
  "final-form-set-field-data": "^1.0.2",
- "lodash": "^4.17.20",
  "prop-types": "^15.0.0"
  },
  "peerDependencies": {

src/useGracefulField.js

@@ -7,7 +7,6 @@ import {
 } from 'final-form'
 import { useForm, type FieldRenderProps, useField } from 'react-final-form'
 import * as React from 'react'
-import get from 'lodash/get'
 
 export type UseGracefulFieldProps = {
  afterSubmit?: () => void,
@@ -66,6 +65,8 @@ export default function useGracefulField(
 ): FieldRenderProps {
  const form = useForm('useField')
 
+ const [lastFormValue, setLastFormValue] = React.useState()
+
  const field: FieldRenderProps = useField(name, {
  afterSubmit,
  allowNull,
@@ -74,12 +75,14 @@ export default function useGracefulField(
  component,
  data,
  defaultValue,
- format: (value, name) =>
- raw && (field.meta.active || raw.parseError)
+ format: (value: any, name: string): any => {
+ if (value !== lastFormValue) setLastFormValue(value)
+ return raw && (field.meta.active || raw.parseError)
  ? raw.rawValue
  : format
  ? format(value, name)
- : value,
+ : value
+ },
  formatOnBlur: false,
  initialValue,
  isEqual,
@@ -116,20 +119,28 @@ export default function useGracefulField(
  })
 
  const raw = getRaw(field.meta)
- const curValue = get(form.getState().values, name)
+
  React.useEffect(
  () => {
- if (
- !field.meta.active &&
- raw &&
- (!raw.parseError || !Object.is(raw.parsedValue, curValue))
- ) {
+ if (field.meta.active) return
+ if (raw && !raw.parseError) {
  form.mutators.setFieldData(name, {
  'react-final-form-graceful-field': null,
  })
  }
  },
- [field.meta.active, raw, curValue]
+ [field.meta.active]
  )
+
+ React.useEffect(
+ () => {
+ if (field.meta.active) return
+ form.mutators.setFieldData(name, {
+ 'react-final-form-graceful-field': null,
+ })
+ },
+ [lastFormValue]
+ )
+
  return field
 }

yarn.lock

@@ -6990,11 +6990,6 @@ lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.19:
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
-lodash@^4.17.20:
- version "4.17.20"
- resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
- integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
-
 lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0:
  version "4.17.11"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"