Material-ui Autucomplete: указание пользовательского CloseIconButton

Question

люди

Так что моя проблема проста. Я хочу предоставить пользовательский closeIconButton. И только closeIcon prop доступен. CloseIcon prop не достаточно, потому что мне нужна эта пользовательская кнопка, чтобы иметь свойство onClick. И если я размещу на ClickIcon материал CloseIcon, то пользовательский интерфейс выдаст предупреждение: 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

Из api docs closeIcon должен быть только какой-то узел. Например:

<CloseIcon fontSize="small" />

Чем вы можете использовать onClose prop непосредственно на компоненте Autocomplete, чтобы указать обратный вызов. Надеюсь, это поможет.