Modal: Focus goes to browser address bar while it should trapped inside

[ipip2005]

Bug Report

• Package version(s): lateset
• Browser and OS versions: Chrome, Edge

Priorities and help requested (not applicable if asking question):

Requested priority: ( High )

Products/sites affected: (sp-client canvas toolbox)

Describe the issue:

When there is a FocusZone inside Modal, the focus trapping no longer works. The focus will move to browser address bar

Actual behavior:

The focus should always be trapped inside Modal

Expected behavior:

The focus is moved to browser address bar after press TAB on the last item in the Modal.

If applicable, please provide a codepen repro:

Seems Modal is not publicly exported in office-ui-fabric-react package. Here are steps to reproduce it:

1. Find Modal.Basic.Example.tsx in office-ui-fabric-react package.
2. Replace the code to:

import * as React from 'react';
import { autobind } from '../../../Utilities';
import { Modal } from 'office-ui-fabric-react/lib/Modal';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import './Modal.Basic.Example.scss';

export class ModalBasicExample extends React.Component<any, any> {

  constructor() {
    super();
    this.state = {
      showModal: false
    };
  }

  public render() {
    return (
      <div>
        <DefaultButton
          description='Opens the Sample Modal'
          onClick={ this._showModal }
          text='Open Modal'
        />
        <Modal
          isOpen={ this.state.showModal }
          onDismiss={ this._closeModal }
          isBlocking={ false }
          containerClassName='ms-modalExample-container'
        >
          <SearchBox />
          <DefaultButton text='some button' />
          <FocusZone>
            <DefaultButton text='some button' />
            <DefaultButton text='some button' />
            <DefaultButton text='some button' />
          </FocusZone>
        </Modal>
      </div>
    );
  }

  @autobind
  private _showModal() {
    this.setState({ showModal: true });
  }

  @autobind
  private _closeModal() {
    this.setState({ showModal: false });
  }
}

3. Serve the demos, go to "Modal" demo page.
4. Open the Modal dialog, pressing TAB from top to bottom.

GIF

[charlangaOfficial]

Hi! Did you find a possible solution to not focus the address bar?

[erichdev]

Looks like this has to do with putting FocusZone inside of FocusTrapZone (Modal wraps its children in FocusTrapZone).

See repro here: https://codepen.io/erichdev/pen/PJxNZJ A few things to note:

• If you tab from SearchBox to the buttons, then tab again, you are able to tab outside of the FocusTrapZone
• If you tab from the SearchBox to the button, then arrow right to the last button, then tab, FocusTrapZone does indeed prevent you from tabbing to other elements
• Remove the FocusZone, and FocusTrapZone does trap you when tabbing

[erichdev]

Please see dupl #2437