Provide a way to add portaled (outer) nodes inside FocusScope

🙋 Feature Request

Provide a way to pass into FocusScope nodes, which should consider as a part of it — even they are mounted outside of FocusScope node tree (e.g. portaled).

🤔 Expected Behavior

Let say we have portaled tooltips with some links, and these tooltips are inside FormDialog. And we need to have them in its FocusScope in order to be available for tabbing. Something like that: <FocusScope shards={tooltipRefs}><FormDialog /></FocusScope>

😯 Current Behavior

Any ideas?

💁 Possible Solution

See https://github.com/theKashey/react-focus-lock/blob/master/src/Lock.js#L199

🔦 Context

FocusScope inner component has portaled nodes with buttons, links, inputs.

💻 Examples

<FocusScope shards={tooltipRefs}>
  <Input1 /> // inside focus scope
  <Input2 /> // inside focus scope
  <Portal>
    <Input3 />  // outside, but we must have it inside focus scope
  </Portal>
</FocusScope>

[LFDanLu]

@tounsoo A parent FocusScope currently considers a child scope as part of its contain which is why you can click into the input inside the tooltip here and not have the parent scope (aka the Modal) try to restore focus back to one of its immediate children. However, as you mentioned the only problem currently is that we don’t handle tabbing from a parent scope into a portaled child due to our usage of a TreeWalker to determine the next/previous focusable element when hitting Tab. Now that we’ve refactored FocusScope so it tracks scopes via a tree, we could potentially walk down the tree into a child scope when we detect that we are tabbing from that child’s root scope element? I can bring this up with the team to see what they think.

[LFDanLu]

@yakunins This use case should already be supported by our React Spectrum components, albeit the child Popovers also have their own FocusScope: https://codesandbox.io/s/react-spectrum-template-forked-vnmzwm?file=/src/App.js. FocusScope should allow focus to move inside a child scope from a parent scope and should work even when that child scope is portaled.

Here is a slightly modified version of your sandbox, note you can tab to the button that triggers the tooltip, open it with Enter, that focus lands on the tooltip when it opens, and that you can then tab out of the tooltip and land back on the trigger. Note that ideally the tooltip would automatically close when focus leaves it and that tabbing forward from a parent scope into a portaled child FocusScope is not supported.