Material-ui Autocomplete：指定自定义 CloseIconButton

Question

folks

So my issue is simple. I want to provide custom closeIconButton. And only closeIcon prop is available. CloseIcon prop doesn't suffice because I need this custom button to have onClick property. And if I place onClick on CloseIcon material-ui will warn: Failed prop type: Material-UI: you are providing an onClick event listener to a child of a button element. Firefox will never trigger the event. Failed prop type: Material-UI: you are providing an onClick event listener to a child of a button element. Firefox will never trigger the event.

<Autocomplete
     open={open}
     classes={classes}
     options={practicesList}
     getOptionLabel={get('name')}
     value={curPractice}
     blurOnSelect
     closeIcon={<CloseIcon onClick={() => onChange(null)} />}
     onChange={async (e, option) => {
       if (!option) return

       onChange(option.id)
     }}
     renderInput={params => <TextField {...params} autoFocus={autoFocus} fullWidth label={label} margin="none" />}
     renderOption={(practice, { inputValue }) => {
       const matches = match(practice.name, inputValue)
       const letters = parse(practice.name, matches)

       return (
         <div>
           {letters.map((letter, i) => (
             <span key={i} style={{ fontWeight: letter.highlight ? 700 : 400 }}>
               {letter.text}
             </span>
           ))}
         </div>
       )
     }}
   />

Answer 1

From api docs closeIcon should be just some node. For example:

<CloseIcon fontSize="small" />

Than, you can use onClose prop directly on Autocomplete component to specify some callback. Hope this helps.