[tabs] `keepMounted={false}` doesn't mount children but still mounts the root element

[ImSingee]

Bug report

Current behavior

The whole dom for non-active tab panel shouldn't exist when keepMounted is false (or is omitted).

But the dom still exists for non-active tab.

Expected behavior

The last two dom nodes from the previous screenshot shouldn't exist.

Reproducible example

Your doc site https://base-ui.com/react/components/tabs

Or its CodeSandbox https://codesandbox.io/s/gzrqk5?file=src/App.tsx

Base UI version

1.0.0-alpha.8

Which browser are you using?

Chrome 135.0.3179.98 (Official build) (arm64)

Which OS are you using?

macOS

Which assistive tech are you using (if applicable)?

N/A

Additional context

The related component: https://base-ui.com/react/components/tabs#panel

[ImSingee]

From the code, only the children is hidden:

But I do think the whole panel shouldn't exist

[mj12albert]

@ImSingee Thanks for reporting this, for some reason it only unmounts the children, not the root element, which isn't consistent with keepMounted on other components:

base-ui/packages/react/src/tabs/panel/TabsPanel.tsx

Line 50 in 1c796a1

extraProps: { ...other, children: hidden && !keepMounted ? undefined : children },

[ImSingee]

I encountered this issue when motion's exit animation doesn't work.

Before this get fixed, there's a workaround:

<Tabs.Panel className={styles.panel} value="appearance" render={(_props, state) => {
  if (state.hidden) {
    return null;
  }

  return <motion.div ... />
}}>
  ...
</Tabs.Panel>

[mj12albert]

@ImSingee I got the panel to animate with motion reasonably well in #1613

The difficult part is (still) getting motion to recognize the measurements provided by Tabs.Indicator

[mj12albert]

Maybe this was intentional (as kind of a workaround) since it turns out unmounting the panel's root element will cause issues when the value prop is omitted

@ImSingee just wondering if animating the panel with motion is the only issue caused by this? (and if so, does the example in #1613 work for you instead)