When I click on 'select all', I want the input box to display 'ALL' instead of other items.
I attempted to incorporate a condition in the getOptionLabel function, but despite showing 'ALL', it still displays other elements.
<Autocomplete
multiple
label="Students*"
id="createStudent"
options={
studentOptions(index).length > 0
? [
{
value: SELECT_ALL, name: 'ALL',
},
...studentOptions(index)
] : []
}
disableCloseOnSelect
variant='outlined'
getOptionLabel={(option) => {
return (
option.value === SELECT_ALL
? 'ALL'
: option.name
);
}
}
renderOption={(props, option, { selected }) => (
<li {...props}>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.name}
</li>
)}
limitTags={1}
renderInput={(params) => {
return (
<TextField
{...params}
label="Students*"
/>
);
}}
value={formData.createClass[index].studentList}
key={studentOptions(index)}
onChange={handleStudentChange(index, studentOptions(index))}
isOptionEqualToValue={(option, value) =>option.name === value.value || ''}
/>