I'm building a form using Material UI autocomplete (multiple). I need that field to be required. But when i submit the form, with selected value, it allways show the message that the field is required. This problem only occurs if the option multiple = true.
Anyone knows how to solve the problem?
Sample of code in sandbox
Try checking that if the length of the input value array is 0 in the input props of the textfield.
<Autocomplete
includeInputInList={false}
options={options}
getOptionLabel={(option) => option.name}
onChange={(event, newValue) => {
setValue(newValue);
}}
value={value}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label={"Names"}
inputProps={{
...params.inputProps,
autoComplete: "new-password",
required: value.length === 0
}}
required={true}
/>
)}
sample in codesandbox
<Controller
name="jobTitle"
control={control}
render={({ field: { onChange, value }, fieldState: { error } })
=> (
<Autocomplete
disableClearable
onChange={(event, item) => onChange(item)}
value={value}
options={jobTitles.map((jt) => jt)}
getOptionLabel={(jt) => jt}
renderOption={(props, jt) => (
<Box component="li" {...props} key={jt}>
{jt}
</Box>
)}
renderInput={(params) => (
<TextField
label={translate('pages.profile.job_title')}
{...params}
error={!!error}
helperText={error ? 'Job Title is required' : ''}
/>
)}
/>
)}
/>