RAC: Controlled state nested tabs don't work

[Spriithy]

Provide a general summary of the issue here

When I have nested tab groups in my application, controlling the state of the outer Tabs doesn't work for the specific tab which contains another Tabs group.

That is, when I select said tab, the UI flickers and goes back to the previous tab.

When logging the tab change, it appears that when selecting the tab with a Tabs inside, the controlled state goes to the first tab ID of the nested Tabs object ! Maybe there's a Context bounds problem with the nested Tabs firing a change that triggers in the first Tabs group ?

Thanks in advance for your kind help or acknowledgement of the issue !
Thanks for the wonderful work :)

🤔 Expected Behavior?

I expect the tab to be selected and show its content.

😯 Current Behavior

Tabs switches for a second, then goes back to first tab.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

function NestedTabs() {
	const [firstTab, setFirstTab] = useState("a");

        // Log tab on change
	useEffect(() => {
		console.log({ firstTab });
	}, [firstTab]);

	return (
		<Tabs
			selectedKey={firstTab}
			onSelectionChange={setFirstTab}
		>
			<TabList>
				<Tab id="a">AAAA</Tab>
				<Tab id="b">BBBB</Tab>
				<Tab id="c">CCC</Tab>
			</TabList>

			<TabPanel id="a">aaaa</TabPanel>
			<TabPanel id="b">
				bbbb
				<Tabs>
					<TabList>
						<Tab id="x">XXXX</Tab>
						<Tab id="y">YYYY</Tab>
						<Tab id="z">ZZZZ</Tab>
					</TabList>

					<TabPanel id="x">xxxx</TabPanel>
					<TabPanel id="y">yyyy</TabPanel>
					<TabPanel id="z">zzzz</TabPanel>
				</Tabs>
			</TabPanel>
			<TabPanel id="c">cccc</TabPanel>
		</Tabs>
	);
}

Version

RAC 1.2.1

What browsers are you seeing the problem on?

Firefox, Microsoft Edge

If other, please specify.

haven't tested the others

What operating system are you using?

Windowss

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I think this is a duplicate of #5469