React-hook-form: MUI TextField Label Doesn't Shrink on setValue

[minhaferzz]

Describe the bug
When doing a setValue for a Material-UI textfield, the label doesn't shrink as expected.

To Reproduce
https://codesandbox.io/s/react-hook-form-mui-textfield-3czpw

Expected behavior
Label to shrink when data is being set.

Additional context
Not at all sure if this is a react-hook-form problem or a Material-UI problem, but this started with Material-UI version 4.2.1 and up. Version 4.2.0 and down seems to work fine.

[stramel]

I don't believe this is an issue with react-hook-form especially since it worked in previous versions. I'm assuming they modified the internal wiring of events.

I'm not sure if your codesandbox is an example of what you are trying to do or just demonstrating the issue. However, if you are just trying to set an initial value, you can use the defaultValue prop on the TextField.

I will try to take a look into what they changed between 4.2.0 and 4.2.1.

[minhaferzz]

@stramel In my use case, I'm getting values from the backend and setting the value after receiving it.

[stramel]

It does appear they made some changes but i'm unsure how they would prevent that from working. https://github.com/mui-org/material-ui/compare/v4.2.0...v4.2.1#diff-1f94c95b4e8094138b96211b29be700e

[oliviertassinari]

Could the problem come from https://github.com/mui-org/material-ui/pull/16526?

[stramel]

Just for referene, MUI related upstream issue https://github.com/mui-org/material-ui/issues/17018

[stramel]

@oliviertassinari That's basically the only InputBase code changes that I noticed. I would assume it has to be within that. Maybe the checkDirty removal?

[oliviertassinari]

Very possible, I don't really understand how this plugin work in the first place. The only way I can picture it work is by bypassing React, using the DOM input element directly.

Ideally, I wish we had a failing test case we can work with.

[stramel]

@oliviertassinari Correct. basically, we use the DOM input ref to attach event listeners directly. I will see if I can write a failing test for your UI lib.

[oliviertassinari]

Thanks, for instance, you could try to add the check dirty logic back. If it fixes the integration. You could then try to add one of the test cases we have removed, see if it fails without the check dirty logic. Does it make sense?

[stramel]

Yes, thank you for providing some direction.

[stramel]

@oliviertassinari It does fix it when I re-add the checkDirty back in for the uncontrolled inputs. I will open a PR with a failing test and then add a fix.

[oliviertassinari]

Sounds great!

[stramel]

Fix submitted upstream 👍

[bluebill1049]

Thanks @oliviertassinari and @stramel for addressing this issue ❤️

[bluebill1049]

@minhaferzz you happy to close this issue?

[minhaferzz]

Thanks everyone!

[oliviertassinari]

The issue is not solved yet.

[bluebill1049]

@oliviertassinari what's the remaining issue? I thought @stramel already submitted a PR for this issue.

[oliviertassinari]

The latest comment by @eps1lon suggests that the best solution might be applied here.

[bluebill1049]

@oliviertassinari sure can I have bit more detail in terms the fix? (I did check the comment, doesn't make too much sense for me.)

[oliviertassinari]

The concern is expresse in https://github.com/mui-org/material-ui/issues/17018#issuecomment-522869193

[bluebill1049]

@minhaferzz sorry looks like the change are not been merged (https://github.com/mui-org/material-ui/pull/17025) :( hopefully, react hook form gets more popular, so MUI will consider to re-evaluating. I wish I could do something about it but unfortunately, it's a little bit out of my hand at this state. :( I will post you updated if I find a work-around.

[bluebill1049]

Since MUI is probably not going to support RHF for now, one of the options that I could think of is to use the custom register. Basically, register during useEffect without the ref.

[jwthanh]

<TextField
          variant="outlined"
          margin="normal"
          required
          fullWidth
          id="username"
          label="Username"
          name="username"
          autoFocus
          inputRef={register}
        />

using inputRef={register} will resolve

[bluebill1049]

thanks, @jwthanh, it's a problem with setValue currently MUI doesn't support changing the value via input ref. so if you are not using setValue you should be fine with what you supplied.

[bluebill1049]

I am going to close this issue for now. feel free to add more questions in here. hopefully one day this lib gets more popular, MUI will consider supporting :)

[wortkotze]

Is there any fix by now. I really love RHF but for us MUI is an important Component Libary that needs to be supported. Is there any workaround. The rest is really working fine beside this issue with the label. For us its an important usecase to setValues as they are coming from external APIs?

[bluebill1049]

@wortkotze This has been fixed/improved since v3 :)
https://react-hook-form.com/api#Controller

https://codesandbox.io/s/react-hook-form-controller-079xx

[wortkotze]

hm ok, I was using the documentation from the website. there it was documented to use the innerRef. everything is working only by using setValue the label is not moving away. in your links i did not find any usecase for this :( - sry probably I missed something

[wortkotze]

I tried also the Controller version, its stalling in SSR ...

[jonyw4]

I have the same problem too using setValue, the label is not moving away... What we can do to work?

[bluebill1049]

I have the same problem too using setValue, the label is not moving away... What we can do to work?

Take a look Controller https://codesandbox.io/s/react-hook-form-controller-079xx

[jonyw4]

Take a look Controller https://codesandbox.io/s/react-hook-form-controller-079xx

Yeah, MUI works generally well, but take a look in this example:
https://codesandbox.io/s/react-hook-from-mui-setvalue-label-bug-0z5z3

I create an example using a setValue in every time that the field postalCode changes. Notice that when i use setValue the label doesn't go up. Maybe its a MUI bug, but I don't know...

[bluebill1049]

Take a look Controller https://codesandbox.io/s/react-hook-form-controller-079xx

Yeah, MUI works generally well, but take a look in this example:
https://codesandbox.io/s/react-hook-from-mui-setvalue-label-bug-0z5z3

I create an example using a setValue in every time that the field postalCode changes. Notice that when i use setValue the label doesn't go up. Maybe its a MUI bug, but I don't know...

I think you are missing defaultValue: https://codesandbox.io/s/react-hook-from-mui-setvalue-label-bug-v3bwo

[jonyw4]

@bluebill1049 Thanks!!! This solves the issue. Using Controller with defaultValue for MUI works great!!!

[eladams]

This issue also occurs (MUI v4.11) when initializing the Input with value prop equals to undefined/null, if you initialize it with an empty string ("") the dirty check will work as expected.