Как сохранить Material-ui Выберите открытым, когда я нажимаю только на один из элементов в нем

Question

Я пишу пользовательский раскрывающийся список Material-UI Select, в котором сверху есть необязательное текстовое поле, чтобы пользователь мог искать / фильтровать элементы в Select, если было много записей.

Я борюсь с тем, как сохранить Select открытым, когда я щелкаю текстовое поле (отображается как InputBase), и просто имею нормальное поведение (закрытие Select, когда выбран обычный MenuItem.

CodeSandbox здесь: https://codesandbox.io/s/inspiring-newton-9qsyf

 const searchField: TextField = props.searchable ? (
    <InputBase
      className={styles.searchBar}
      onClick={(event: Event) => {
        event.stopPropagation();
        event.preventDefault();
      }}
      endAdornment={
        <InputAdornment position="end">
          <Search />
        </InputAdornment>
      }
    />
  ) : null;

  return (
    <FormControl>
      <Select
        className={styles.root}
        input={<InputBase onClick={(): void => setIconOpen(!iconOpen)} />}
        onBlur={(): void => setIconOpen(false)}
        IconComponent={iconOpen ? ExpandMore : ExpandLess}
        {...props}
      >
        {searchField}
        {dropdownElements.map(
          (currEntry: string): HTMLOptionElement => (
            <MenuItem key={currEntry} value={currEntry}>
              {currEntry}
            </MenuItem>
          )
        )}
      </Select>
    </FormControl>
  );

Как вы можете видеть выше, я пытался использовать stopPropagation и preventDefault, но безрезультатно.

Answer 1

проверить эту ссылку и код ссылки: https://codesandbox.io/s/busy-paper-9pdnu

Вы можете использовать open опору Выбрать API