CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
angus
angus

Reputation: 3320

Autocomplete Chip when multiple is false

I like the Chip option when multiple is true. Is there an option to enable Chip also when multiple is false ?

<Autocomplete
                className={classes.search}
                options={top100Films}
                getOptionLabel={(option) => option.title}
                multiple={false}
                renderInput={(params) =>
                    <TextField {...params}
                        variant="outlined"
                        label="Customer's journey"
                        helperText="Search by: program"
                    />}
            />

Thank you

Upvotes: 0

Views: 573

Answers (1)

arseneyr
arseneyr

Reputation: 328

No, unfortunately you would have to change the Autocomplete to a controlled component and do this yourself via the startAdornment prop on the Input. Something like:

function MyAutocomplete() {
  const [value, setValue] = useState(null);

  const chip = value ? 
    <Chip label={value.title} onDelete={() => setValue(null)} size="medium" /> 
    : undefined;
  
  return (
    <Autocomplete
        size="medium"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        onChange={(event, newValue) => setValue(newValue)}
        value={value}
        renderInput={(params) => (
          <TextField
            {...params}
            InputProps={{
              ...params.InputProps,
              startAdornment: chip
            }}
            variant="outlined"
            label="Customer's journey"
            helperText="Search by: program"
          />)}
     />);
}

Demo here

Upvotes: 1

Related Questions