Set value of input based on value of other input with Material-UI Textfield

[chrishoermann]

Describe the bug
I'm trying to set the value of a Material UI TextField based on the value of another Textfield with react-hook-form.

Everything works fine so far but when set via setValue() the textfield shows placeholder and input value simultaneously (see sandbox 1)

When I use react-hook-form Controller and some custom validation, it gets quirky:
the values in the Textfields are displayed correctly but the values that get validated are always behind by one character (see sandbox 2)

To Reproduce
see sandbox links

Codesandbox link (Required)

sandbox 1:
https://codesandbox.io/s/set-remote-input-jufwx?file=/demo.js

sandbox 2:
https://codesandbox.io/s/setremoteinputcontroller-40777?file=/demo.js

Expected behavior
sandbox 1: only the text should be shown in the textfield (no Placeholder)
sandbox 2: the validation value should reflect the input value

Desktop (please complete the following information):

• OS: Win 10
• Browser Opera ,Chrome
• Version: Opera 68.0, Chrome: 81.0.4044.129

[devrnt]

Sandbox 1
Seems like a related issue: mui/material-ui#718
I would suggest to watch on the 'TextFieldTwo' value and manually set the shrink option.
https://codesandbox.io/s/flamboyant-mountain-9532t

Sandbox 2
Can be fixed by setting the mode in useForm to onChange. Do mind that this often comes with a significant impact on performances.
https://codesandbox.io/s/setremoteinputcontroller-wwsdt

[chrishoermann]

@devrnt Thanks for the help! I tried the Sandbox 2 option and currently it introduces no performance issues.

I'll definitely try out the sandbox 1 version too. Needs a lot less code and is more readable.