MUI multi select with or without controller

[sivaputrevu]

Hi,

I am currently experiencing issue with material ui multi select with react hook form.
I am looking for an example on how to wrap select multiple in a controller so that the selected values array will get populated in getValues().
error: Uncaught Error: Material-UI: The value prop must be an array when using the Select component with multiple.
at SelectInput.js:289
at Array.map ()
at SelectInput (SelectInput.js:274)
at renderWithHooks (react-dom.development.js:14803)
at updateForwardRef (react-dom.development.js:16816)
at beginWork (react-dom.development.js:18645)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22157)
at workLoopSync (react-dom.development.js:22130)
at performSyncWorkOnRoot (react-dom.development.js:21756)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at discreteUpdates$1 (react-dom.development.js:21893)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)

[bluebill1049]

have you tried with render props with Controller?

[bluebill1049]

please read the doc first.

[bluebill1049]

https://react-hook-form.com/api#Controller

[sivaputrevu]

it's working like a charm with render!!
here is the working version
URL: https://codesandbox.io/s/hidden-cache-xjroe?file=/src/App.tsx

[bluebill1049]

nice one! yay!

[nishkohli96]

For [email protected] , you can find the solution here.

[Biz-e-Services]

Hi BlueBill1049
I see sivaputrevu codeSandbox uses TypeScript... I guess his example will not work for .js?
If not can you point me in right direction or do you suggest I go ts?
I'm using .js and MUI.

[Biz-e-Services]

Hi Pramade
Still having a few issues, but eventually found https://codesandbox.io/s/react-hook-form-controller-601-forked-774eo?file=/src/MuiAutoComplete.js as a better example as the https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r didn't work for me. I reverted to using as={props... instead of render={props...

I'm glad I'm not the only one having issues as I thought I was going mad. I'm hoping Bill will be able to help and provide a bit of sample code that also aids in the validation side of things. I can get the "required" functionality to work but if I clear the field and post my form it does not validate as its still posting an empty array. Not sure how to validate on minLength=1 to force it to validate the second time around.

[bluebill1049]

I am not clear why you need minLength, but for custom validation please consider to use.

rules={{
  validate: (data) => data.length 
}}

[bluebill1049]

a lot of stuff its in the doc, in fact, you can find most of the answers there.

[Biz-e-Services]

Thanks Bill. I was using minLength as I could not get the "required: true" to work. On first form post it would validate, but then when selecting as few options and posting again and then returning to the form and removing the selected options it doers not validate even though the field is empty. I figured out it's still posting an empty array hence validation is not producing error. So I tried minLength...
Reverted to below code, but a few things not working...

1. Using render={props => produced error reverted to as={props =>
2. disableCloseOnSelect also not working for me
3. If I select a few values and then remove them, the field does not validate as required and posts empty array.

` <Controller
as={props => (
<Autocomplete
{...props}
options={safetyInvestigationOptions && safetyInvestigationOptions.map((data) => ({ value: data._id, label: data.name }))}
getOptionLabel={(option) => option.label}
renderOption={option => (option.label)}
getOptionSelected={(option, value) => .isEqual(option, value)}
renderInput={params => (
<TextField
{...params}
label="Type of Investigation"
//variant="standard"
error={errors.safetyInvestigation ? true : false}
helperText={
errors.safetyInvestigation && errors.safetyInvestigation.type === "required" ? "Type of Investigation is required"
: null
}
/>
)}
onChange={(, data) => props.onChange(data) }
/>
)}
name="safetyInvestigation"
rules={{ required: true }}
multiple
disableCloseOnSelect
filterSelectedOptions
control={control}
className={classes.formControl}
/>

"root":{
"requestDetails":{
"riskClassification":"medium"
"safetyInvestigation":[
]
}
}`

Great work you guys are doing, just me and my "coding abilities" getting in the way :-)

[bluebill1049]

take a look at the validate function, and use it to see what's the component is returning.

validate: (data) => console.log(data) // do your validation here