javascript - 防止 material-ui 弹出元素的自动对焦

Question

我正在尝试创建一个搜索匹配列表，该列表会随着用户在查询中键入内容而更新。但是，我不知道如何保持对输入元素的关注。弹出窗口总是聚焦。我已尝试使用 refs 以编程方式设置焦点，但我无法为无状态函数组件(我假设这是我的 TextField 输入)提供 ref。

这是行为的 gif。 https://imgur.com/a/JVskedr

注意弹出窗口如何窃取焦点并阻止用户进一步输入。

<TextField
              id='contact'
              label='Contact Name'
              className={classes.textField}
              margin='normal'
              ref={this.nameInput}
              onChange={this.handleContactSearch.bind(this)}
              value={this.state.contactSearch}
            />
            <Popover
              open={Boolean(anchorEl)}
              anchorEl={anchorEl}
              onClick={this.handlePopoverClose}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'center'
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'center'
              }}
              autoFocus={false}
            >
              <List>{this.createContactList()}</List>
            </Popover>

这些是相关函数:

  handleContactSearch(event) {
    this.handlePopoverClick(event);
    this.setState({ contactSearch: handleText(event) });
    this.props.filterContacts(
      event.target.value,
      this.props.accountInfo.AccountName
    );
  }
  handlePopoverClick = event => {
    this.setState({
      anchorEl: event.currentTarget
    });
  };

  handlePopoverClose = () => {
    this.setState({
      anchorEl: null
    });
  };

如何使 TextField 元素保持焦点，以便用户可以不间断地键入他们的查询？

沙盒:https://codesandbox.io/s/mjqoj9lxkj

Answer 1

将“disableAutoFocus”、“disableEnforceFocus” Prop 传递给您的弹出窗口。它对我有用!

<Popover
 open={Boolean(anchorEl)}

 // pass these props to the popover component
 disableAutoFocus={true}
 disableEnforceFocus={true}
 >

https://material-ui.com/api/modal/