MUI TextField label doesn't fill the input on uncontrolled reset

[Moshyfawn]

Can someone help me understand, if there's a way to prevent the behavior on the step 4 from happening?

1. Open this CSB
2. Notice Title input label fills out the input
3. Enter any value into the Title input
4. Click Reset button
5. See the Title input label still at the top of the input even tho it's value is empty

On the contrary, if after all the steps above:

5. Enter any string into the Title input
6. Clear the Title input's value (delete it's value yourself, without resetting the form)
7. See the Title input label fill out the input again

The TextField is uncontrolled (register form API used)
It looks like MUI exposes the input's ref correctly + I've provided the proper default value for the Title input to reset to (empty string)

input-reset-issue.mp4

[bluebill1049]

have a look at this disucssion: #220

[Moshyfawn]

Huh, I thought the issue should've been fixed with MUI introducing the proper ref exposure instead of inputRef. Fair enough.

I read through the RHF and MUI discussions and I have a question: Is there a reason for mutating the input's value with it's defaultValue provided at the hook level as defaultValues via ref instead of returning defaultValue with register and useController (field.defaultValue) to set as defaultValue / defaultChecked?

[bluebill1049]

basically, it will need a state update before MUI can shrink the label, I think they have introduced a new prop on the shrink part. useController or Controller should be the solution for this. One of the hook form members did post a PR to fix this issue without needing a state flush to detect the label shrink, however, it got declined.

[Moshyfawn]

Yep, I was going to shrink my MUI labels and add additional placeholders with some example text after finding this out. But thx for the explanation!
I'm just curious, would it be a good idea to pass defaultValues from useForm into register and useController to return along with other field props (value, onChange etc.) for the dev to assign to their input instead of mutating the value of the inputs via ref internally in RHF?

[bluebill1049]

yea, unfortunately, I don't think all the libraries have consistent naming, and some may not even support uncontrolled out-of-the-box. The same reason onFoucs was not introduced, was because I was worried about compatibility with all kinds of libraries (include "home made" as well).

[RohanKhedekar21]

Can anyone help me to fix this issue. still facing same