javascriptreactjsmaterial-uijsx

Applying InputAdornment to MUI AutoComplete removes the options list


I built an AutoComplete component that looks like this: AutoComplete 1

<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>
        ),
      }}
    />
  )}
/>;

However, the list of options do no longer appear when clicking inside the box. If I remove the InputProps from <TextField /> like so:

<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"} />
  )}
/>;

the list of options show as expected.

Is there a way I can add an inputAdornment (just a search icon) to AutoComplete component without removing the Options list?


Solution

  • Here I found the solution, you can try following code

    <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}
                      </>
                    )
                  }}
                />
              );
            }}
          />
    

    It is working fine. you can also check here in CodeSandbox

    for more details check this Github material-ui issue