将 InputAdornment 应用于 MUI AutoComplete 会删除选项列表

Question

我构建了一个自动完成组件，如下所示：

<Autocomplete
  freeSolo
  size="small"
  id="filter-locks-autocomplete"
  options={json_list ? json_list : []}
  groupBy={(option) => option.lock.building}
  getOptionLabel={(option) => (option.name)}
  inputValue={inputValue}
  onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      label={'lock'}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <Search sx={{ color: "black", fontSize: 20, marginLeft: "2px" }} />
            {params.InputProps.startAdornment}
          </InputAdornment>
        ),
      }}
    />
  )}
/>;

但是，在框内单击时，选项列表不再出现。 如果我像这样从

<TextField />

中删除 InputProps：

<Autocomplete
  freeSolo
  size="small"
  id="filter-locks-autocomplete"
  options={json_list ? json_list : []}
  groupBy={(option) => option.lock.building}
  getOptionLabel={(option) => option.name}
  inputValue={inputValue}
  onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
  ListboxProps={{ sx: { zIndex: 1500 } }}
  renderInput={(params) => (
    <TextField {...params} variant="standard" label={"lock name"} />
  )}
/>;

选项列表按预期显示。

有没有办法可以将 inputAdornment（只是一个搜索图标）添加到 AutoComplete 组件而不删除选项列表？

Answer 1

我在这里找到了解决方案，你可以尝试以下代码

<Autocomplete
        id="tags-standard"
        options={top100Films}
        getOptionLabel={option => option.title}
        defaultValue={[top100Films[13]]}
        renderInput={params => {
          return (
            <TextField
              {...params}
              variant="standard"
              label="Multiple values"
              placeholder="Favorites"
              fullWidth
              InputProps={{
                ...params.InputProps,
                startAdornment: (
                  <>
                    <InputAdornment position="start">
                      <SearchIcon />
                    </InputAdornment>
                    {params.InputProps.startAdornment}
                  </>
                )
              }}
            />
          );
        }}
      />

工作正常。您还可以在 CodeSandbox

中查看

有关更多详细信息，请检查此 Github Material-ui Issue

Answer 2

对于使用 MUI v.6 的用户，您需要使用

slotProps

来代替：

<TextField
  {...params}
  variant="standard"
  label="Multiple values"
  placeholder="Favorites"
  fullWidth
  slotProps={{
    input: {
      ...params.InputProps,
      startAdornment: (
        <>
          <InputAdornment position="start">
            <SearchIcon />
          </InputAdornment>
        </>
      ),
    },
  }}
/>