Layer: Fix FocusTrapZone detection of Layered children

[JasonGore]

Pull request checklist

• Addresses an existing issue: Fixes Dropdown: not opening when used in a panel which needs to scroll into view the dropdown #6484
• Include a change request file using $ npm run change

Description of changes

Layer (before Portals) did not render content until after the virtual parent was set (after the first render pass in componentDidUpdate.) When Portals was introduced in #6211, the Layer content is rendered immediately in the first render pass, before virtual parent can be properly set. This is the root cause for #6484.

This PR prevents Layer content from rendering (and thus triggering focus events) until the virtual parent can be properly set.

Microsoft Reviewers: Open in CodeFlow

[cschleiden]

[JasonGore]

Yeah, David and I talked about the additional render pass. This is pretty similar to pre-Portals behavior, though. If you can think of any methods that can render the Layer content AND set virtual parent before the rendered content triggers the window focus handler in FTZ, I'm all ears.

My initial hope was that the rootElement wrapper would be able to set virtual parent before componentDidMount gets called (it does.) Unfortunately the rootElement wrapper does not get called before FTZ's focus handler. As a result, FTZ incorrectly grabs focus since it can't identify the focus target as a valid child.

[msft-github-bot]

🎉[email protected] has been released which incorporates this pull request.:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[cschleiden]

@JasonGore No I couldn't, it just always feels bad to artificially delay the rendering :)