How to stop autofocus on Mui Menu Items

Question

I am implementing a search feature inside a custom Mui Select component. The idea being the user can start typing a city or country and the options list is filtered down. The issue is that as soon as a user types a letter that is also the first letter of an option, the option is auto focused and the textfield blurred. How do I resolve this?? I have tried autoFocus={false} on menu item and it didn't help. Current code:

      <div>
        <StyledButton
          aria-controls="location-select-menu"
          aria-haspopup="true"
          aria-expanded={anchorEl ? 'true' : 'false'}
          onClick={handleOpen}
          endIcon={<KeyboardArrowDownIcon />}
          theme={theme}
          disableRipple
          clicked={clicked.toString()}
        >
          {t('location')} {cities.length > 0 ? `(${cities.length})` : ""}
        </StyledButton>
        <StyledMenu
          id="search-location-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={handleClose}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          autoFocus={false}
        >
          <ListSubheader sx={{ height: "45px" }}>
            <Grid container justifyContent="space-between">
              <Grid item xs={1}>
                <SearchIcon fontSize={16} />
              </Grid>

              <Grid item xs={7}>
                <BorderlessTextField
                  id="search-location"
                  variant="standard"
                  size="small"
                  InputProps={{
                    disableUnderline: true,

                  }}
                  value={searchValue}
                  onChange={handleSearchChange}
                />
              </Grid>
              <Grid item xs={4}>
                <CityOrCountrySelect
                  handleChangeCountryOrCitySelected={handleChangeCountryOrCitySelected}
                  countryOrCitySelected={countryOrCitySelected}
                />
              </Grid>
            </Grid>
          </ListSubheader>
          <hr />
          {
            filteredSearchOptions?.map((option) => (
              <MenuItem

                key={option.value}
                selected={isCity ? cities.includes(option.value) : country === option.value}
                onClick={(event) => handleClick(event, option.value)}
              >
                {option.label}
              </MenuItem>
            ))
          }
        </StyledMenu>
      </div>

Answer 1

You may use Autocomplete component for your requirement.