当我仅单击其中一项时，如何保持 Material-ui Select 打开

Question

我一直在编写一个自定义的 Material-UISelect下拉列表，它的顶部有一个可选的文本字段，允许用户在Select有很多条目的情况下搜索/过滤项目。

我正在努力解决如何Select在单击文本字段（呈现为 ）时保持打开状态并仅具有正常行为（选择常规时InputBase关闭。SelectMenuItem

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

正如你在上面看到的，我尝试使用stopPropagationandpreventDefault但没有成功。

Answer 1

查看此codesandbox链接：https://codesandbox.io/s/busy-paper-9pdnu

您可以使用Select APIopen的 prop