question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`reset` does not update watched values

See original GitHub issue

Describe 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:closed
  • Created 4 years ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
bluebill1049commented, Sep 19, 2019

lovely @AlexFrazer i will release this patch with other fixes tonight

0reactions
bluebill1049commented, Sep 19, 2019

please consider star the repo to support if you find it useful too (no pressure) 🙏

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found