Material UI Autocomplete

Question

I am building a form using Material UI's autocomplete feature. The field renders chips however I am unable to modify the onDelete prop of the chip component. I have tried modifying other props such as the variant, label, etc but even trying to get the onDelete prop to do a simple console log does not work. My code is below.

        <Autocomplete
      onChange={handleRecChange("foodRecs")}
      multiple
      options={menuItems}
      renderTags={(value, getTagProps) =>
        value.map((option, index) => (
          <Chip
            variant="outlined"
            key={option}
            label={option}
            onDelete={() => console.log("test")}
            {...getTagProps({ index })}
          />
        ))
      }
      renderInput={params => (
        <TextField
          {...params}
          variant="standard"
          label="Recommendations"
          placeholder="Choose anything from the menu"
          fullWidth
        />
      )}
    />

How are you capturing user selections? I'm having trouble figuring out how to access the actual selected values of the Autocomplete... — Jay J
– Jay J, Commented Jan 7, 2021 at 20:36

Ido · Accepted Answer · 2019-12-17 08:44:03Z

4

That's because you override onDelete in this line:

{...getTagProps({ index })}

getTagProps is a getter for the tag props. It includes onDelete function, since onDelete is a Chip property (you can print the getTagProps return value to see that).
You should placegetTagProps on the first line, to avoid unwanted prop overrides:

  <Chip
    {...getTagProps({ index })}
    variant="outlined"
    key={option}
    label={option}
    onDelete={() => console.log("test")}
  />

answered Dec 17, 2019 at 8:44

Ido

5,8002 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material UI Autocomplete

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related