防止材质用户界面弹出框元素自动聚焦

Question

我正在尝试创建一个搜索匹配列表，该列表会随着用户在其查询中键入而更新。但是，我不知道如何保持对输入元素的关注。弹出窗口总是会集中注意力。我曾尝试使用ref以编程方式设置焦点，但无法给无状态功能组件（假设这是我的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”道具传递给您的弹出框。它对我有用！

<Popover
 open={Boolean(anchorEl)}

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

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

Answer 2

发生这种情况的原因是this.showPopover(event)每次onChange={this.handleContactSearch.bind(this)}在<TextField>.

为了解决这个问题，您需要找到一种this.showPopover(event)只调用一次的方法。

我能够使用autoFocus={true}和 上的onFocus={this.showPopover}事件的组合使其工作<TextField/>。唯一的问题是当您第一次打开模态时，弹出窗口将显示为空。我ref在文本字段上使用了 a并使用了条件来设置弹出框的不透明度，因此它仅在文本字段中有值时才显示。

也许不是最终的解决方案，但它有效，至少应该让你朝着正确的方向前进。

<div className={classes.paper}>
    <TextField
        id="contact123"
        label="Contact Name"
        className={classes.textField}
        margin="normal"
        onChange={this.handleContactSearch.bind(this)}
        value={this.state.contactSearch}
        autoFocus={true}
        onFocus={this.showPopover}
        inputRef={input => (this.tf = input)}
    />
    <Popover
        open={Boolean(anchorEl)}
        anchorEl={document.getElementById("contact123")}
        onClick={this.closePopover}
        anchorOrigin={{
            vertical: "bottom",
            horizontal: "center"
        }}
        transformOrigin={{
            vertical: "top",
            horizontal: "center"
        }}
        style={{ opacity: this.tf && !this.tf.value.length ? 0 : 1 }}
    >
        <List>{this.state.contactSearch}</List>
    </Popover>
    <div>
        <Button color="primary" className={classes.saveButton}>
            Save
        </Button>
    </div>
</div>

沙盒：工作演示