Чип автозаполнения пользовательского интерфейса при удалении не работает

Question

Я пытаюсь реализовать автозаполнение с помощью пользовательского интерфейса материала. Когда я использую пользовательский svg на чипе как deleteIcon, onDelete не работают.

import React, {useState, useEffect} from 'react';
import { SvgIcon } from '@material-ui/core';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

const MySVGComponent = () => {
    return (
        <SvgIcon className="customClose" viewBox='0 0 11 11'>
            <svg className="MuiSvgIcon-root MuiChip-deleteIcon" width="8" height="8" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.82831 8.82837L3.17145 3.17151" stroke="#808080"></path>
                <path d="M3.17145 8.82837L8.8283 3.17152" stroke="#808080"></path>
            </svg>
        </SvgIcon>
    )
}

const labels = [{labelName: 'Important'}, {labelName: 'Confidential'}, {labelName: 'Urgent'}]

const MyAutoCompleteComponent = () => {
  return (
    <Autocomplete
     multiple
     renderTags={(tagValue, getTagProps) =>
       tagValue.map((option, index) => (
         <Chip
           onDelete={() => console.log('You Deleted this icon')}
           deleteIcon={<MySVGComponent />}
           label={option.labelName}
           {...getTagProps({ index })}
           style={{
             backgroundColor: label === 'Confidential' ? 'red' : 'green'
           }}
         />
       ))
     }
     freeSolo
     tabIndex={1}
     disableClearable
     options={labels}
     getOptionLabel={option => option.labelName}
     onChange={onLablesChange}
     renderInput={params => (
       <TextField
         {...params}
         variant="standard"
         label="Labels"
         margin="normal"
         fullWidth
       />
     )}
   />
  )
}

export default MyAutoCompleteComponent

Answer 1

Вам необходимо добавить реквизиты в свой собственный SvgIcon:

const MySVGComponent = (props) => {
    return (
        <SvgIcon className="customClose" viewBox='0 0 11 11' {...props}>
            <svg className="MuiSvgIcon-root MuiChip-deleteIcon" width="8" height="8" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.82831 8.82837L3.17145 3.17151" stroke="#808080"></path>
                <path d="M3.17145 8.82837L8.8283 3.17152" stroke="#808080"></path>
            </svg>
        </SvgIcon>
    )
}