Nested `Tabs` height transitions break due to CSS variable bleed and 0-height behavior of `TabList` and `TabPanel`

[magraina]

Provide a general summary of the issue here

When nesting <Tabs> inside another <Tabs> component, the transition animations severely break and can cause cause large layout shifts, when switching the outer <Tabs> component. This is caused by three distinct issues interacting with each other.

🤔 Expected Behavior?

1. Nested TabPanels should not inherit transition CSS variables from parent TabPanels. (Perhaps the TabPanels should set these variables initially, or TabPanel should reset them to auto for nested childs).

Workaround:

.react-aria-TabPanels {
  position: relative;
  height: var(--tab-panel-height);
  width: var(--tab-panel-width);
  /* .... */
}

.react-aria-TabPanel {
  padding: var(--spacing-3);
  border-radius: var(--radius);
    /* .... */

  --tab-panel-width: auto; /* <-- Reset the variable for nested TabPanels */
  --tab-panel-height: auto;
}

2. Outer TabPanels measuring logic should either wait for nested collections to finish building, or TabList should hold its space synchronously or TabList should hold on to a at least a minimum size.
   Workaround: Setting a hard min-height on the TabList CSS class to reserve the space during the initial render.

3. At least mentioning somewhere that this is needed.
   Workaround: Explicitly providing defaultSelectedKey to the nested <Tabs> so the inner <TabPanel> mounts synchronously

😯 Current Behavior

Issue 1: CSS Variable Inheritance (Bleed)

The outer <TabPanels> applies inline styles for --tab-panel-height and --tab-panel-width to handle transitions. However, CSS Custom Properties inherit downwards.
When a nested <TabPanels> mounts, it does not have set a inline style for --tab-panel-height and --tab-panel-width. So while the transformation is ongoing the nested <TabPanels> applies the values of the outer <TabPanels> which are bigger than they should.
It ends up temporarily inheriting the parent's explicit pixel height, throwing off the layout.
This issue happens not always as the TabPanels seems not always set the CSS custom properties and it

Issue 2: TabList has 0 height on initial render

When the nested <Tabs> component mounts while switching the Tab on the outer Tabs component, the inner <TabList> initially renders with 0px height.
This causes the transition logic to calculate the wrong height for the transition. Which causes a layout shift right after the transition, which is exactly the height of the <TabList>

Issue 3: TabPanel has 0 height oninitial render

When the nested <Tabs> component mounts, if defaultSelectedKey is not explicitly provided, the component takes one render frame to determine the active tab. During this frame, the nested <TabPanel> renders with 0px height. This causes the transition logic to calculate the wrong height for the transition. Which causes a large layout shift right after the transition, which is exactly the height of that <TabPanel>

💁 Possible Solution

No response

🔦 Context

Trying to setup a layout that needs to have nested Tabs.

🖥️ Steps to Reproduce

StackBlitz
Switch between the Tabs on the upper Tabs element (parent) in the Preview:

• Switch form the first General to the second Tab Appearance and notice normal behavior (This is the one I have modified with min-height on TabList and and `defaultSelectedKey``)
• Switch back to the first Tab General and notice the radical change on the layout within the transition.
• Switch to the third Profile Tab and notice the text and the input fields on the nested Tab shifting in size because the container is changing the size (Noticeable shift on the text might be depending on preview window size - try changing it if you cant notice it).
• Switch back to the second Appearance Tab
• Switch to the last Tab Notifications and notice normal behavior (This is the one where I have added a class to the parents TabPanel to stop inheriting the wrong css variable)

Version

react-aria: 3.50.0 - react-aria-components: 1.19.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Ah, we could probably unset that variable inside of TabPanel here:

react-spectrum/packages/react-aria-components/src/Tabs.tsx

Line 632 in 54d1b2b

<dom.div

It's only used on the TabPanels, the parent of the panel.

[magraina]

@snowystinger why using unset and not auto?
unset resets a property to its inherited value if the property naturally inherits from its parent (unset - mdn).
Which basically would mean, that it will behave like it is now.

[mvanhorn]

Opened PR #10293 for the nested-inheritance part: TabPanelInner now resets --tab-panel-width/--tab-panel-height to auto on the panel div, so a nested TabPanels stops picking up the outer panel's pixel values mid-transition. The two 0-height initial-render reports look like separate timing issues in the collection build and aren't covered there.

[snowystinger]

@magraina The key is here:

if the property naturally inherits from its parent

Height does not naturally inherit from its parent. Instead, it will become whatever the default of the browser is, which would be auto. So it's equivalent. One is just more clear that we're clearing out the value so it doesn't propagate and the other seems like we intentionally want it to be auto, which isn't quite true. initial is another option.

[magraina]

@snowystinger I like your point on that!
TL;DR then initial would be the sweet spot to reflect the actual intent which is functionally equivalent to auto.

The problem though with CCS variables is, that such keywords are evaluated a bit differently, than one might expect.
It's true that height does not naturally inherit form it's parent, but CSS Custom properties do naturally inherit.
Which means that, if you set the variable to unset (it is equivalent to inherit in that case), it will inherit the value from a parent variable (if there is any; in that specific case it would be a absolute length form the parents TabPanels). The result of that evaluation is provided to the height and width property which consumes the variable.
At the end this means, the height and width property is not actually set to unset by the variable, but to the absolute value which was evaluated before.

Unless inheritance it is not explicitly set to false via @property it will inherit in that way. And initial will be safe to use as long as there is no explicit @property rule set defining that.

[snowystinger]

The problem though with CCS variables is, that such keywords are evaluated a bit differently, than one might expect.
It's true that height does not naturally inherit form it's parent, but CSS Custom properties do naturally inherit.

Today I learned, thanks for pointing that out.