防止Material-UI弹出框元素自动聚焦 [英] Prevent auto focus of a material-ui popover element

问题描述

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

I am attempting to create a search match list that updates as the user types in their query. However, I can't figure out how to maintain focus on the input element. The pop-up always gets focussed. I have tried programmatically setting the focus using refs but I cannot give a stateless function component (I'm assuming this is my TextField input) a ref.

这是行为的形象. https://imgur.com/a/JVskedr

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

Notice how the popup steals focus and prevents the user from typing further.

<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元素保持焦点，以便用户可以输入查询而不会中断?

How can I make the TextField element maintain focus so a user can type their query without interruption?

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

推荐答案

发生这种情况的原因是，每次 onChange = {在您的< TextField> 中触发this.handleContactSearch.bind(this)} 事件.

The reason why this is happening is that you are calling this.showPopover(event) every time the onChange={this.handleContactSearch.bind(this)} event is fired in your <TextField>.

为解决此问题，您需要找到一种方法，该方法仅调用一次 this.showPopover(event).

In order to fix this, you'll need to find a way to call this.showPopover(event) only once.

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

I was able to make it work using a combination of autoFocus={true} and the onFocus={this.showPopover} event on the <TextField/>. The only issue with this is that the popover will show up empty when you first open the modal. I used a ref on the textfield and a conditional to set the opacity of the popover so it only shows once there's a value in the textfield.

也许不是最终的解决方案，但它可以工作，并且至少应该向正确的方向发送信息.

Maybe not the ultimate solution, but it works and should at least send you in the right direction.

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

沙盒:工作演示

这篇关于防止Material-UI弹出框元素自动聚焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！