Dialog's focus lock steals focus across frame boundaries

🐛 Bug report

Current Behavior

Check the CodeSandbox example linked below. When opening the Dialog by clicking Show Dialog the button in it gets focussed (so far so good). Now use the mouse to return focus to the CodeSandbox and try to type something. As soon as you begin, the focus is returned to the button in the dialog.

The problem in our setup is a bit more complex as we’re opening a Google Driver Picker from a dialog but the underlying problem seems to be the same: The focus lock on the dialog is too aggressive.

Expected Behavior

The focus lock does not interfere with frame boundaries (ie. doesn’t steal focus from iframes or the like).

Reproducible example

CodeSandbox

Suggested solution(s)

At first I wanted to propose to make this configurable through a prop like disableFocusLock. However, given the extreme example of the CodeSandbox being rendered unusable maybe there is a more holistic solution to this. Maybe this is even an issue in react-focus-lock?

Happy to help implement something after a pointer in the right direction 🙌

Your environment

Software	Name(s)	Version
Reach Package	@reach/dialog	latest (0.10.0)
React		16.12.0
Browser		Chrome

Edit: This might be related to #83

[chaance]

Added the unstable_lockFocusAcrossFrames prop in 0.10.1

[theKashey]

I am adding new crossFrame option, right now defaults to true, as long as this behaviour might introduce a breaking change for someone.

• setting crossFrame=true will work “as today”. Focus will try to keep focus
• setting crossFrame=false will work “as proposed”. Iframes would be treated as “pages”, and let you move focus outside.

I am not sure which behaviour is actually correct - iframes are usually a part of a page, a part of your product, and the only exemptions are non-production examples like code-sandbox.