-
Notifications
You must be signed in to change notification settings - Fork 125
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
updateInputsWithValue
doesn't trigger onChange
?
#566
Comments
This is very interesting, but I'm having a little trouble following. Where is the isChanged value stored that the input is being disabled by? The form should know that isChanged is true (I think), so it sounds like your version of it isn't being updated because onChange isn't called. But why not just set it when you load localStorage and find data? or store isChanged in localStorage alongside the form data you're saving? |
I chose to set So programmatical changes to the form content would not trigger |
Yeah at the moment we don't. It's a bit odd to say "tell me you changed after I change you." You're using it as a round-about way of fetching the isChanged. I think it would be better to just fetch that directly. I think this is just an issue of missing documentation, because it looks like you can call |
I didn't know that And
Isn't that what |
Fun thing I just realized: I haven't found the source code so I cannot be very sure, but from my component I did observe this behavior. |
This is the source-code of |
@felixmosh Thoughts on making |
I don't think that Maybe it is better to change the |
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 === What I wanted to do 4 months ago was: Click to expand!
const [isChanged, setIsChanged] = useState(false)
const handleChange = (currentValue, isChanged) => {
if (!isChanged) return;
clearTimeout(timer);
timer = setTimeout(() => {
save_to_local(currentValue)
setIsChange(!_.isEqual(currentValue, fetched_remote_profile_data))
})
} === But since Click to expand!on page first render
const [profile, setProfile] = useState(fetched_remote_profile_data)
useEffect(() => {
const saved = read_from_local()
if (saved) setProfile(saved)
}, []) the submit buttonbutton is disabled if no changes have been made to the form <button disabled={_.isEqual(profile, fetched_remote_profile_data)}>submit</button> on user typeslet timer;
...
const handleChange = (currentValue, isChanged) => {
if (!isChanged) return;
setProfile(currentValue);
clearTimeout(timer);
timer = setTimeout(() => {
save_to_local(currentValue)
})
} === Or maybe with <button disabled={_.isEqual(formRef.current.getModel(), fetched_remote_profile_data)}>submit</button> === Or a global <button disabled={formRef.current.isPristine}>submit</button> Anyway, this has little to do with Thanks for all your supports!!❤️ (Though for me, it feels very intuitive to trigger an |
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 byupdateInputsWithValue
.Also there is a button that submit the form which is disabled by
isChanged === false
.The flow is:
localStorage
(useEffect)isChanged = true
(onChange)However, it seems that
updateInputsWithValue
doesn't triggeronChange
, so if some changes saved inlocalStorage
, and is loaded, the button is disabled sinceisChanged
does not get updated.Any suggestions?
The text was updated successfully, but these errors were encountered: