[material-ui][Chip] onDelete function not called on Chip present inside Multiselect

[zee0786]

Duplicates

• I have searched the existing issues

Related page

https://mui.com/material-ui/react-select/

Kind of issue

Broken demonstration

Issue description

I was looking for a chip that can be implemented using multi select and it appears that is able to represent them though but unable to delete them using the onDelete functionality provided as props on the Chip.

Here goes the code below

import React, { useState } from 'react';
import { Select, MenuItem, Chip } from '@mui/material';

const MySelect = () => {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleDelete = (value) => { // Not called
    setSelectedValues((prevValues) => prevValues.filter((item) => item !== value));
  };

  const handleChange = (event) => {
    setSelectedValues(event.target.value);
  };

  return (
    <Select
      multiple
      value={selectedValues}
      onChange={handleChange}
      renderValue={(selected) => (
        <div>
          {selected.map((value) => (
            <Chip key={value} label={value} onDelete={() => handleDelete(value)} />
          ))}
        </div>
      )}
    >
      {['Option 1', 'Option 2', 'Option 3'].map((option) => (
        <MenuItem key={option} value={option}>
          {option}
        </MenuItem>
      ))}
    </Select>
  );
};

export default MySelect;

Context 🔦

I was searching for an onDelete functionality on the multiSelect Chip using renderValue Props

[ZeeshanTamboli]

@zee0786 This is a duplicated of multiple issues - #35488, #27614, #21378, #18658.