Fix TabPanel initial rendering

[youknowriad]

Addresses #48893 (comment)

What?

When a TabPanel component is initially rendering there's a first rendering that happens with "no tab being actually rendered" then an effect triggers to actually set the active tab.

This behavior creates an issue for UIs that are supposed to be rendered right away. For instance if a "DropdownMenu" holds the TabPanel, the focus is not moved to the right position within the dropdown when it opens because at the tab is first rendered as empty.

How?

The solution here uses a useLayoutEffect to address this as this hook is supposed to be used for all effects that have an effect on UI causing React internally to only render to the DOM once.

Testing Instructions

1- Open a paragraph inspector control
2- Click the "background" color in the style inspector controls.
3- The dropdown should open and the "focus" should be within the dropdown.

I also suspect that this PR could fix the popover bug discovered here #49349 but there might be still a race condition with the Popover component.

[jasmussen]

In following the instructions, I did see focus transferred in trunk:

However this branch seems to fix a positioning issue also:

[github-actions]

Flaky tests detected in 0b7e6d3.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4532014019
📝 Reported issues:

• [Flaky Test] can create template parts via the block placeholder start blank option #49016 in /test/e2e/specs/site-editor/template-part.spec.js
• [Flaky Test] doesn't throw a block error when clicking on a link #47747 in /test/e2e/specs/site-editor/template-part.spec.js

[andrewserong]

Good catch! The reasoning to switch to useLayoutEffect sounds good to me, and with this PR applied, I haven't been able to reproduce the popover positioning issue 👍. I wasn't able to reproduce the issue of focus not going to the correct position within the popover on trunk, though.

LGTM! ✨

[andrewserong]

Oh, before this lands, it'd be good to add a changelog entry since this affects a component in the components package.

[aaronrobertshaw]

Works great for me, thanks!

✅ useLayoutEffect logic is sound
✅ Focus works as advertised
✅ Color popovers are now positioned correctly as well

+1 for the changelog before landing.

Nice work ✨

[talldan]

Thanks for fixing this ❤️

I can confirm it works in my testing (I needed to use safari/voiceover to repro), so will merge.