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.

watch/useWatch/getValues issue with conditionally rendered fields

See original GitHub issue

Describe the bug After hiding and showing conditional fields their watch e getValues values are not retrieved on render. Values are available after some specific actions, like button clicks, though. This issue occur even with shouldUnregister option set false.

To Reproduce Steps to reproduce the behavior:

  1. input some value on conditionally rendered fields (User name)
  2. toggle off these fields
  3. toggle them on again
  4. check messages on page (“User name is on watch” and “User name is on getValues”) or check logs. Messages won’t be rendered and username prop won’t show on logs

Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-v6-getvalues-jvmw6?file=/src/index.jsx:1004-1119

Expected behavior It is expected that username’s value should be restored and returned by watch and getValues on toggle on user name field

Desktop (please complete the following information): OS: Windows 10 Pro 1909 Browser: Brave Version: 1.10.97

Additional context Please, let me know if I missed something and this is not a bug, so I can move to Discussions.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
giovanicascaescommented, Jul 18, 2020

the simplest way just toggle the visibility of that input.

Yes, this was what I ended up doing.

that’s what i am seeing here (unless i am missing steps), can you change to latest patch instead of RC version?

Changed to latest version and it works correctly.

Thank you guys for your very quick replies and awesome work. Sorry for my mistake.

0reactions
bluebill1049commented, Jul 18, 2020

That means when I remove a registered input from render and then attach it again watch will “reset” itself? If so how can I handle this and restore form field value?

Even so, it is weird, because even with default values, either in useForm’s args or watch’s args (check CSB again), form value is not restored. Maybe I’m missing something here.

the simplest way just toggle the visibility of that input.

Answering your question the expectation is returning eg. “GrandmaCOBOL” in user name’s input after toggle it off/on.

that’s what i am seeing here (unless i am missing steps), can you change to latest patch instead of RC version?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Render fields conditionally · Issue #59 · pmndrs/leva - GitHub
gsimone implementation idea: useControls({ togglerino: true, myFielderino: { value: "theta", condition: (siblings, ...
Read more >
Issues with conditional rendering react - Stack Overflow
My objective here is I'm trying to check if the value of {game.embed_url} is NULL then no <iframe> should be rendered, else <iframe>...
Read more >
React conditional rendering: 9 methods with examples
In React, conditional rendering refers to the process of delivering elements and components based on certain conditions.
Read more >
Conditional Rendering - React
You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the...
Read more >
7 Ways to Implement Conditional Rendering in React ...
This article covers seven different ways to implement conditional rendering in React applications with practical examples and performance ...
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