React弹出窗口的Focus和tabIndex

Question

I have the following React popup component:

export class PopUp extends React.Component {
  public divContainer: HTMLElement;

  public componentDidMount() {
    this.divContainer.focus();
  }

  private buildRef = (e: HTMLDivElement) => {
    this.divContainer = e;
  }

  render() {
    return (
      <div ref={this.buildRef} tabIndex={0}>
        <header>My PopUp</header>
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

This is one of the ways it can be used:

<PopUp>
  <div>
    <textarea rows="4" cols="50">
      Stuff goes here
    </textarea>
  </div>
  <button>Add</button>
</PopUp>

Right now when I tab, the focus gets put on the popup's parent div, as expected. If I keep tabbing, it focuses on the children but once the last child element is reached, the focus moves to the parent page on top of which the popup is opened.

I only want tabbing/focusing to be restricted to the Pop up elements. How can I get it to loop back to put focus on the popup's parent div once it's done focusing on the last child?

Answer 1

I am hoping you resolved your issue already. But the way I have made a Dialog or popup with children component "loop" the tabbing, I had to add a blur={() => {this.theFirstChildReference.focus();}}

Today I typically put that in its own function of the class. So

setFirstChildFocus = () => {
  this.firstChildReference.focus();
};

and therefore

blur={this.setFirstChildFocus}

property in the last Child component.