CODEWITHSUNDEEP
javascriptreactjsmaterial-uijsx
Saleh Rabbaniy
Saleh Rabbaniy

Reputation: 505

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?

Upvotes: 9

Views: 3875

Answers (2)

Ange Loron
Ange Loron

Reputation: 1213

For those using MUI v.6, you need to use slotProps instead:

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

Upvotes: 0

sodhankit
sodhankit

Reputation: 1248

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

Upvotes: 13

Related Questions