javascript - 在材质ui选择中添加文本框

Question

我正在尝试在材料 ui 选择选项中添加一个文本框，但是在更改文本框中的文本时，我想停止键导航，因为在按下字母键时，它正在导航到以该字母开头的选项这是我正在尝试的代码和图片达到

<Select
            className={className}
            style={style}
            open={open}
            value={value}
            error={error}
            onChange={props.onChange}
            labelWidth={labelWidth}
            autoWidth={true}
            disabled={disabled}
            inputProps={{ helperText: helperText }}
            MenuProps={{
              classes: {
                root: "menu-item"
              }
            }}
            classes={{
              disabled: 'editable',
              select: 'selected-item'
            }}
          >
            {
              <form>
                  <TextField
                    style={{ width: "150px" }}
                    onChange={(event) => handleChange(event)}
                    error={validation.isTextInValid}
                    onClick={
                      event => {
                        event.stopPropagation();
                      }
                    }
                    value={text}
                    label="Add New"
                    InputProps={{
                      endAdornment: (
                        <InputAdornment>
                          <div className="d-flex">
                            <IconButton
                              type="submit"
                              size="sm"
                              onClick={event => {
                                event.stopPropagation();
                                add()
                              }}
                            >
                              <i className="fa fa-plus"></i>
                            </IconButton>
                          </div>
                        </InputAdornment>
                      ),
                    }}
                  />
                </form>

            }
            {props.children}
          </Select>

标签： javascriptreactjsmaterial-ui