I have the bellow state:
const [colaboradorSelected, setColaboradorSelected] = React.useState(multiple ? [] : {});
And I have a function to control data selection when an array of registration numbers is inserted into the input, separated by space or ;.
const handleInputChange = async (valor) => {
toggleLoading();
let valores = valor.split(/[\s,;]+/);
if (valores.length > 1 && (validarMatriculaPlansul(valores[0]) || validarMatriculaCaixa(valores[0]))) {
setEhArray(true)
console.log('aberto: ', open)
setOpen(false)
console.log('valores: ', valores)
setArrayMatriculas(valores)
} else {
setEhArray(false)
}
toggleLoading();
};
The following function records the state after confirming.
const handleInputConfirm = () => {
let linhas = [];
arayMatriculas.forEach((valor) => {
const valorInt = parseInt(valor, 10);
const linha = colaboradorOptions.find(
(option) => option.matricula === valorInt
);
if (linha) {
linhas.push(linha);
}
});
console.log('opçoes: ', linhas)
setColaboradorSelected(colaboradorSelected.concat(linhas));
setArrayMatriculas([])
}
Until then, it works, but the generated chips are not interactable until Auto complete receives any type of input.
The component:
<Autocomplete
open={open}
autoSelect={false}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
multiple={multiple}
fullWidth={fullWidth}
size={size}
options={colaboradorOptions}
value={colaboradorSelected}
onChange={handleColaboradorChange}
disableCloseOnSelect
isOptionEqualToValue={(option, value) =>
option.nome === value.nome ||
option.matricula === value.matricula ||
option.login === value.login
}
getOptionLabel={(option) =>
option.matricula + " - " + option.login + " - " + option.nome
}
loading={loading}
noOptionsText={ehArray ? "Buscar matriculas?" : "Nenhum Resultado!"}
renderOption={(props, option) => {
return (
<li {...props} key={option.matricula}>
{option.nome}
</li>
);
}}
renderInput={(params) => (
<TextField
{...params}
label={label}
placeholder={placeholder}
onChange={(event) => handleInputChange(event.target.value)}
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress
color="inherit"
size={20}
/>
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
onKeyDown={(event) => {
if (event.key === "Enter" && ehArray) {
handleInputConfirm()
}
}}
onBlur={(event) => {
if (ehArray) {
handleInputConfirm()
}
}}
/>
)}
renderTags={(value, getTagProps) => {
return (
<>
<div style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'start',
alignItems: 'start',
overflowY: 'auto',
height: 'auto',
maxHeight: '70px'
}}>
{value.map((option, index) => (
<Chip
{...getTagProps({ index })}
size="small"
key={index}
label={(sohMatricula) ?
(caixa ? option.login : option.matricula)
:
(caixa ? option.login : option.matricula) + ' - ' + option.nome}
/>
))}
</div>
</>
);
}}
/>
I tried a few things but was unsuccessful.