React-hook-form with Material-ui textfield without autoFocus defaultValue disappeared during form submit

Question

I have problem using react-hook-form v7 + material-ui textfield. The defaultValue working if I set autoFocus or I manually change the textfield value. However if I just submit without mouse click on the filed that not autoFocus, the defaultValue disappeared during the form submit. Please check codesandbox link

Test 1: don't touch anything, click submit, you will see submit value only has title but missing name and desc
Test 2: mouse click or change value in name, you will see after submit the value of name is there

My question is how to make this default value always submit even though without mouse click or change the value of the textField?

Please help and thanks in advance

Thanks for @micFung solution. The major problem of this one is material-ui and react-hook-form are using different keys inputRef vs ref. There are 2 solutions 1. use react form controller codesandbox.io/s/… 2. manually map inputRef and ref codesandbox.io/s/… — zt1983811
– zt1983811, Commented Jul 6, 2021 at 16:20

Mic Fung · Accepted Answer · 2021-07-06 07:36:00Z

4

To use Material-ui with react-hook-form. It is better to wrap it with Controller to allow react-hook-form to link with the 3rd party library element.

https://react-hook-form.com/api/usecontroller/controller

Wrap Textfield with Controller

const { handleSubmit, control } = useForm();
...

<Controller
    render={({ field }) => (
    <TextField
        autoFocus
        margin="dense"
        id="title"
        label="Title"
        type="text"
        fullWidth
        {...field}
    />
    )}
    control={control}
    name="title"
    defaultValue={data.title}
/>
...

After that, the default value will be able to work as expected.

Here is the codesandbox for demo.

answered Jul 6, 2021 at 7:36

Mic Fung

5,7102 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zt1983811 Over a year ago

Thanks @micFung , this is working solution. An extra, I would like to know if there is solution without using Controller ? just use register?

Mic Fung Over a year ago

Yes you can. but you need to set the ref yourself explicitly because the input ref in material-ui is called inputRef instead of ref so the register() provided ref cannot be mapped correctly.

Mic Fung Over a year ago

Here is the codesandbox for demo: codesandbox.io/s/…

zt1983811 Over a year ago

Awesome, I see the problem now. Thanks so much. I wish material-ui or react-hook-form could make it computable one day :-) . Great answer and explanation @micFung

Collectives™ on Stack Overflow

React-hook-form with Material-ui textfield without autoFocus defaultValue disappeared during form submit

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related