You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using react-hook-form with defaultValues and readOnly inputs (that are temporarily editable), handleSubmit does not trigger after changing the input value and re-disabling it.
It seems that the value in getValues() always returns the initial defaultValues and does not reflect the actual DOM value after editing, even though the input's value has visibly changed in the UI.
Reproduction Steps
Initialize the form with defaultValues.
Render an <input> with readOnly={true} and bind it with register().
On double-click, toggle readOnly to false to allow editing.
Change the value, then set readOnly back to true.
Call handleSubmit(onSubmit) after disabling the field.
The onSubmit callback is not triggered if the only change is in a readOnly field when defaultValues are set.
Expected Behavior
When the value of a readOnly input changes (while temporarily editable), react-hook-form should detect the change compared to defaultValues and trigger handleSubmit accordingly.
Actual Behavior
When defaultValues are set:
getValues(name) returns the initial value from defaultValues.
The change in the DOM is not detected.
handleSubmit does not run or treats the field as unchanged.
If defaultValues are not set, everything works as expected.
Versions
react-hook-form: 7.60.0
React: 19.0.0
Browser: Google Chrome
OS: Windows 10
Additional Context
This issue seems related to how react-hook-form caches initial values from defaultValues and doesn't re-read the DOM value when the field is readOnly. It may require calling setValue() manually, but that should not be necessary if the field was temporarily editable.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Description
When using
react-hook-form
withdefaultValues
andreadOnly
inputs (that are temporarily editable),handleSubmit
does not trigger after changing the input value and re-disabling it.It seems that the value in
getValues()
always returns the initialdefaultValues
and does not reflect the actual DOM value after editing, even though the input's value has visibly changed in the UI.Reproduction Steps
defaultValues
.<input>
withreadOnly={true}
and bind it withregister()
.readOnly
tofalse
to allow editing.readOnly
back totrue
.handleSubmit(onSubmit)
after disabling the field.onSubmit
callback is not triggered if the only change is in areadOnly
field whendefaultValues
are set.Expected Behavior
When the value of a
readOnly
input changes (while temporarily editable),react-hook-form
should detect the change compared todefaultValues
and triggerhandleSubmit
accordingly.Actual Behavior
When
defaultValues
are set:getValues(name)
returns the initial value fromdefaultValues
.handleSubmit
does not run or treats the field as unchanged.If
defaultValues
are not set, everything works as expected.Versions
Additional Context
This issue seems related to how
react-hook-form
caches initial values fromdefaultValues
and doesn't re-read the DOM value when the field isreadOnly
. It may require callingsetValue()
manually, but that should not be necessary if the field was temporarily editable.Beta Was this translation helpful? Give feedback.
All reactions