CODEWITHSUNDEEP
material-uiautocompletereact-hook-form
Morteza
Morteza

Reputation: 23

MUI AutoComplete with Checkboxes with RHF ( React Hook Form )

I'm using Material UI 6.1.10 with React Hook Form 7.53.2 I'm trying to have a re-usable AutoComplete field with ability to select multiple values. problem is, if my AutoComplete doesn't have onChange prop, It's value always returns empty and I can't get the value of it.

enter image description here

I can fix this by adding onChange prop to it, but another problem rises, which is, when i select an option, checkboxes don't get selected and I can select the same option multiple times in my field.

enter image description here

I tried using AutoComplete field without checkboxes, but it doesn't matter, problem still stands, If I have onChange prop, seems like field can't figure out with options are selected, and if I remove onChange prop, field seems to know with options are selected but value is always empty.

enter image description here

I appreciate your help 🤝

Upvotes: 0

Views: 43

Answers (1)

SebastianK
SebastianK

Reputation: 180

Edit:

Since you are using the useController hook, you can get the form value from the destructured “field” object that useController returns. When using onChange, you must also pass in the ‘value’ prop to the Autocomplete component. So add the following property to the Autocomplete component:

value={field.value}

and reenable the onChange callback

Original:

You should instead use a <Controller> component, and then in the render function you will return the Autocomplete using the onChange and value parameters of the render function (see the example of the Controller documentation).

Upvotes: 0

Related Questions