MUI Autocomplete API: when I paste space-delimited text,on enter event a single tag is created for it. Can multiple tags be created on "enter" event?

Question

I am using MUI Autocomplete control in my reactjs application. Right now if I paste a custom (not available in list of options) space-delimited content eg 3N1CE2CPXEL289419 3N1BC1AP8AL399166 , on hit of enter button a single tag is created for it as : Autocomplete API image

So I have a scenario where user pastes space-delimited text. Is it possible that a single tag is created for each space-delimited value ie one for 3N1CE2CPXEL289419 and one for 3N1BC1AP8AL399166 on hit of enter button?

Answer 1

below is how we achieve abv -

                   <Autocomplete
                    multiple
                    limitTags={2}
                    id="tags-filled"
                    onChange={onChange}
                    size="small"                   
                    onInputChange={onInputChange}
                    options={rowData.map((option) => option.vinno)}
                    value={autoCompleteValue}
                    freeSolo
                    loading
                    //defaultValue={[top100Films[13].title]}                    
                    //onSelect={(event) => onSelect(event, 'tags')}
                    /* either render tags will work or renderoption */
                    renderTags={(value, getTagProps) =>
                        value.map((option, index) => (
                            <Chip variant="outlined" onDelete={onDelete} label={option} {...getTagProps({ index })} />
                            // <Chip variant="outlined" onDelete={onDelete} label={option} {...getTagProps({ index })} onDelete={onDelete} />
                        ))
                    }
                    renderInput={(params) => (
                        <TextField
                            {...params}                            
                            variant="outlined"
                            label="VinNOs"
                            placeholder="Favorites"
                            onKeyDown={e => {
                                if (e.key === "Enter" && e.target.value) {
                                    let text = e.target.value;
                                    if (text.includes(" ")) {
                                        let vinnos = text.split(" ");
                                        setAutoCompleteValue(autoCompleteValue.concat(vinnos));

                                    } else {
                                        setAutoCompleteValue(autoCompleteValue.concat(e.target.value));
                                    }
                                }
                            }}
                        />
                    )}