MUI 自动完成 endAdornment 吹走了默认的 clearIcon

Question

我正在使用 MUI 自动完成功能，并在获取选项（从外部源）时向文本字段添加了一个 endAdornment 加载器，但这会覆盖 MUI 的 clearIcon（大概是因为它也是一个 endAdornment）。如何确保保留默认的 clearIcon？这是我的代码 -

<Autocomplete
        style={{ margin: 'auto' }}
        options={itemOptions}
        getOptionLabel={(option: Item) => option? option.name:''}          
        value={selectedItem}
        inputValue={filterInput}
        onInputChange={(e, v) => handleInputChange(v)}
        onChange={(e, val) => {
          if (val) {
            handleItemSelect(val)
          }
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Items"
            variant="outlined"
            style={{ width: '300px' }}
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <>
                  {loading ? <CircularProgress color="inherit" size={25} /> : null}
                </>
              ),
            }}
            type="text"
          />
        )}
/>

Answer 1

我想出来了，只需要补充一下：

{params.InputProps.endAdornment}

给我的 endAdornment 像这样：

endAdornment: (
                <>
                  {loading ? <CircularProgress color="inherit" size={25} /> : null}
                  {params.InputProps.endAdornment}
                </>
              ),

MUI 自动完成 endAdornment 吹走了默认的 clearIcon

MUI Autocomplete endAdornment blowing away default clearIcon

reactjs

autocomplete

material-ui