Proposal | Don't mount Tab content unless tab is active - add mountMode prop

[adokce]

I was surprised that non-active tabs still render the same as active tab. For non-trivial use-cases, like having some kind of data fetching + list rendering logic in tabs, we don't want to have it all mount when their tab is not active.

So, instead of having to do something like this, where we need to control if content should be mounted, I think having a prop like mountMode with options active and all would be beneficial.

Current example:

import * as Tabs from "@radix-ui/react-tabs";
import {useState} from "react";

const activeTab = useState("tab1")

return (
  <Tabs.Root
    value={activeTab}
    onValueChange={(newValue) => setActiveTab(newValue)}
  >
    <Tabs.List aria-label="tabs example">
      <Tabs.Trigger value="tab1">One</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
      <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
    </Tabs.List>
    {activeTab === "tab1" ? (
      <Tabs.Content value="tab1">
        Tab One
      </Tabs.Content>
    ) : null }
    {activeTab === "tab2" ? (
      <Tabs.Content value="tab2">
        Tab Two
      </Tabs.Content>
    ) : null }
    {activeTab === "tab3" ? (
      <Tabs.Content value="tab3">
        Tab Three
      </Tabs.Content>
    ) : null }
  </Tabs.Root>
)

Proposed example:

import * as Tabs from "@radix-ui/react-tabs";

return (
  <Tabs.Root
    defaultValue="tab1"
    mountMode="active"
  >
    <Tabs.List aria-label="tabs example">
      <Tabs.Trigger value="tab1">One</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
      <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="tab1">
      Tab One
    </Tabs.Content>
    <Tabs.Content value="tab2">
      Tab Two
    </Tabs.Content>
    <Tabs.Content value="tab3">
      Tab Three
    </Tabs.Content>
  </Tabs.Root>
)

[andy-hook]

Related: #813

Hey @adokce thanks for your proposal. I think this makes a lot of sense and has been requested a few times recently. I can't see any strong reason why this shouldn't be the default behaviour.

@jjenzz @benoitgrelard Are there any implications if we made this change? afaik none of our other primitives work this way out of the box so curious if there's a specific reason why we didn't go this route originally.

[benoitgrelard]

I don't remember exactly but I think it was @chaance who worked on the tabs and I thought he had a good reason for it, perhaps he'll stop by this way to enlighten us? If not I'll try and get in touch to find out more.

[jjenzz]

I imagine it might be something to do with aria-controls, but we can probably do something similar to what we did in Collapsible. We leave the wrapper div mounted but unmount its children, something like:

<Primitive.div>{isOpen && children}</Primitive.div>

[jjenzz]

This has been added to 0.1.1-rc.6

[stuarthendren]

Yes that would be really useful.
I think the default could be either always (default) or transient - if it was transient that would be consistent with the current behaviour, but I have no personal preference there. The lazy version I did mounted when first activated and doesn't unmount on further tab changes, which, I think, is same as what you are suggesting and although niche I think it would be useful; a best of both performance wise.

[jjenzz]

I'm torn on this one. Keeping things mounted can make component lifecycle more complex our side because we wouldn't have a remount to reset everything back into its original state and if we provide this behaviour here, do we then agree to do the same for Popover (where we had a request for this before) and others? It would mean we'd have to keep the fact that things don't unmount in mind and make sure we are manually resetting things where needed.

@stuarthendren I'm curious why preserving state isn't possible for you. What graph library are you using? It seems strange to me that you wouldn't be able to get output from it.

Worse case, you can portal the graph into the tab content when it is active which means your other tab content can mount/unmount as usual. It doesn't seem sensible to have all tab content mounted if it is just the graph that is the issue: https://codesandbox.io/s/fervent-noyce-xyb7w?file=/src/App.tsx

[stuarthendren]

We're using cytoscape.js. The layout is essentially uncontrolled, so if a user moves anything those changes are lost.
And maybe we could add listeners, pull out the layout details and control them but the (re-)mounting would still be slow.

I agree that the mount behaviour should probably be at the tab content level so you have more control and would also not object to unmounting being the default.

Thanks for the codesandbox, that's similar to what I was doing but I think a little better.

[jjenzz]

[...] but the (re-)mounting would still be slow.

That's true.

Thanks for the codesandbox, that's similar to what I was doing but I think a little better.

Yeah, the portalling solution should allow you to keep state and a11y intact.

I agree that the mount behaviour should probably be at the tab content level

We have a ticket to add Presence to the tab component which would introduce a forceMount prop at Tabs.Content level. With that, you would be able to do something like:

<Tabs.Root>
  <Tabs.Content value="one" forceMount hidden={value !== "one"}><Graph /></Tabs.Content>
</Tabs.Root>

The intention with that prop is to support unmount animation with JS but seems it could solve your case too.

[stuarthendren]

yeah, I think that would be sufficient for my use case and cover others too. Seems like a good solution.