`updateInputsWithValue` doesn't trigger `onChange`?

I have a form that saves its content every time 3 seconds after a user typing event, to localStorage.

And if user refreshes page, the content inside localStorage will be loaded and the form is updated with that content by updateInputsWithValue. Also there is a button that submit the form which is disabled by isChanged === false.

The flow is:

1. load from localStorage (useEffect)
2. update form (same useEffect)
3. when form changed, set state isChanged = true (onChange)

However, it seems that updateInputsWithValue doesn’t trigger onChange, so if some changes saved in localStorage, and is loaded, the button is disabled since isChanged does not get updated.

Any suggestions?

[felixmosh]

This is the source-code of updateInputsWithValue

[adsee42]

After leaving the problem for 4 months, I think now I can figure out how to implement what I want:

The core of the problem is to determine if form's currentValue === form's initialValue

===

What I wanted to do 4 months ago was:

Click to expand!

1. manage form-changed with state

const [isChanged, setIsChanged]  = useState(false)

1. on form change (user typing or updateInputsWithValue)

const handleChange = (currentValue, isChanged) => {
  if (!isChanged) return;
  clearTimeout(timer);
  timer = setTimeout(() => {
    save_to_local(currentValue)
    setIsChange(!_.isEqual(currentValue, fetched_remote_profile_data))
  })
}

===

But since updateInputsWithValue doesnot trigger onChange, I have to manage the form data with useState

Click to expand!

on page first render

1. form rendered with some initial values controlled by useState(initialValues) (user profile, for example)

const [profile, setProfile] = useState(fetched_remote_profile_data)

1. after component did mount, check local storage for save values

useEffect(() => {
  const saved = read_from_local()
  if (saved) setProfile(saved)
}, [])

the submit button

button is disabled if no changes have been made to the form

<button disabled={_.isEqual(profile, fetched_remote_profile_data)}>submit</button>

on user types

let timer;
...
const handleChange = (currentValue, isChanged) => {
  if (!isChanged) return;
  setProfile(currentValue);
  clearTimeout(timer);
  timer = setTimeout(() => {
    save_to_local(currentValue)
  })
}

===

Or maybe with getModel? (haven’t tried this):

<button disabled={_.isEqual(formRef.current.getModel(), fetched_remote_profile_data)}>submit</button>

===

Or a global isPristine as I mentioned in another issue

<button disabled={formRef.current.isPristine}>submit</button>

Anyway, this has little to do with updateInputsWithValue so I’m closing the issue for now.

Thanks for all your supports!!❤️

(Though for me, it feels very intuitive to trigger an onChange any time the value of the form changes…🙃)