I'm currently facing a challenge with managing and notifying the user about setting a duplicate value. By default, if a user tries to input a value that already exists in the list, the "tag" won't be added. While this functionality works for me, I also want to display a warning message near the input field indicating that duplicate values are not allowed...
<Autocomplete
PaperComponent={CustomPaper}
onChange={(event: any, newValue: string[], reason: string) => {
handleInputUsersChange(event, newValue, reason);
}}
autoComplete
freeSolo
fullWidth
multiple
id={props.id}
value={props.initEmails}
options={listUsers.map((item) => {
return item.name;
})}
renderInput={(params) => {
return (
<div ref={params.InputProps.ref} style={{ display: 'flex' }} data-test="test-div-autocomplete-comp">
<TextField {...params} style={{ width: '1200px' }} />
</div>
);
}}
/>
I am attempting to capture the validation or event used by Autocomplete to prevent adding duplicate tags, but so far I have been unsuccessful...
Thank you in advance!