Material-UI TextField is not updating value when using setValue of react-hook-form

0
votes

I'm trying to set new value that I'm getting from props and than update the TextField component with setValue of react-hook-form library.

The problem is that the value sometimes staying empty and sometimes the label is not floating (shrinking).

Codesandbox (Please notice that I built wrapper component for TextField over there) https://codesandbox.io/s/romantic-bird-tq4sf?file=/src/App.js

2
reactjsmaterial-uireact-hook-form

2 Answers

0
votes

Well, if the label isn't floating or shrinked, then the value you are trying to insert into the field is just gonna be an empty string then I guess? Also, think about completely removing the dependency array from the useEffect like this:

useEffect(() => {
  // Code here
})

instead of this:

useEffect(() => {
  // Code here
}, [.....]) <-- REMOVE THAT ARRAY

Maybe give that a try - in combination with the previous answer?

0
votes
  setValue("business_name", "netanel" || someData);

This code overwrites the value. This codes writes netanel to the field, if it is true, which is always the case. Connected issue.

Do it like this:

  setValue("business_name", someData);

So someData is always defined anyway.

Since you are already defining the fallback value in the destruction here: { someData = "netanel" }

Update:

To prevent the label bug, you need to define a default value, so that the initial value passed is not null or undefined.

So change your textfield to this:

 <Controller
    as={MuiTextField}
    name={name}
    control={control}
    label={label}
    defaultValue=""
  />

and it works.