Blocking dialog often set the focus in wrong element

[cnshenj]

Environment Information

• Package version(s):
  "office-ui-fabric-react": "^6.138.1",
  "react": "^16.8.1",
  "react-dom": "^16.8.1",

Please provide a reproduction of the bug in a codepen:

https://codesandbox.io/s/5x3zvo621x

Repro 1

1. Click the 2nd TextField.
2. Click the Checkbox.

Repro 2

1. Click the empty space of the dialog so none of the input elements has focus
2. Click the 2nd TextField

Actual behavior:

The 1st TextField gets focus.

Expected behavior:

In Repro 1, the Checkbox should have focus
In Repro 2, the 2nd TextField should have focus

Note: If modalProps={{ isBlocking: true }} is removed, then there is no issue.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)
Maybe

Requested priority: (Blocking, High, Normal, Low)
High. This makes blocking editable dialog unusable.

Products/sites affected: (if applicable)

[JasonGore]

If I set isBlocking to false, I see the issue reported in #7992. Linking as possibly related.

[JasonGore]

This and #7992 appear to be regressions caused by #7906.

[JasonGore]

This CodePen (click the Toggle to switch to #8011 repro) shows that this issue appears to have been fixed due to the merge of #8053 and release of v6.142.0. Please let me know if you see any other issues. Thanks!

[cnshenj]

Updated to latest 143 but the issue is not completely fixed.

1. Click the second TextField.
2. Click anywhere outside the dialog.

Expected:
None of the dialog input element should have focus

Actual:
The first TextField gets focus (you can repro this in your CodePen)

Another issue:
When a modal dialog is opened, the first TextField automatically gets focus, but the onFocus handle is not called