`reset` does not update watched values
See original GitHub issueDescribe the bug
Using reset
from the default export does not cause the watched values to update.
To Reproduce Steps to reproduce the behavior: Take the following example:
export default function Filters() {
const methods = useForm();
const onSubmit = values => {
console.log(values);
};
return (
<FormContext {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)}>
<fieldset>
<legend>Basic Filters</legend>
<MySelect
name="name"
options={[
{ label: 'Megumin', value: 1 },
{ label: 'Aqua', value: 2 },
{ label: 'Darkness', value: 3 },
]}
/>
</fieldset>
<div>
<button onClick={methods.reset} type="button">Clear</button>
<button type="submit">Submit</button>
</div>
</form>
</FormContext>
);
}
I then create a custom ReactSelect
using the same basic items
function MySelect({
name,
options,
onChange,
...props
}) {
const { watch, register, setValue } = useFormContext();
const value = watch(name);
const selected = useMemo(() => findOption(value, options), [options, value]);
const handleChange = useCallback((option, info) => {
setValue(name, get(option, 'value', undefined));
if (onChange) {
onChange(option, info);
}
}, [name, setValue, onChange]);
return (
<ReactSelect
name={name}
options={options}
value={selected}
innerRef={register({ name })}
onChange={handleChange}
/>
);
}
When I click the reset button, it doesn’t cause the watched values to update
Expected behavior
I expect watch
to re-run with an empty value when I use the reset method.
Screenshots Not super applicable
Desktop (please complete the following information):
- OS: Mac OSX
- Browser: chrome
- Version: latest
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
I am using react-hook-form@3.23.10-beta.5
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (6 by maintainers)
Top Results From Across the Web
React-hook-form's 'reset' is working properly, input fields are ...
Useful answer : calling reset() does nothing. The empty object passed to reset will state for new values. Even better, reset(defaultValues) if ...
Read more >useForm - reset - React Hook Form
An optional object to reset form values, and it's recommended to provide the entire defaultValues when supplied. keepErrors, boolean. All errors will remain....
Read more >[Apple Watch] Unable to Check for Update - Apple Developer
"Steps are: Press Volume Up and let go. Press Volume Down and let go. Press and hold the side button. ... Then, I...
Read more >Mutations in Apollo Client - Apollo GraphQL Docs
You'll also learn how to update the Apollo Client cache after executing a ... Calling reset does not remove any cached data returned...
Read more >React Hooks cheat sheet: Best practices with examples
Why does the React useState Hook not update immediately? ... As opposed to just passing an initial state value, state could also be ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
lovely @AlexFrazer i will release this patch with other fixes tonight
please consider star the repo to support if you find it useful too (no pressure) 🙏