[Accordion][Collapsible][Tabs][…] Consider adding an option to control how `Content` is mounted/unmounted over time/activation cycle

[Kilian]

Feature request

Overview

For the tabs I would like an option to keep the inactive tab contents around in the DOM. For components with a heavy mounting cost, or components with internal state, the current solution is suboptimal. Instead of unmounting, tabs could be set to aria-hidden.

Examples in other libraries

Reach works like this: https://reach.tech/tabs/

Who does this impact? Who is this for?

Anyone using the tabs for components with internal state.

Additional context

n/a

---

Edit (April 5th 2022): People tend to ask for one or the other, so the gist is for us to see if we can provide an option to cater for both.

[jjenzz]

We had a previous discussion about all this for reference #855

Notably a "lazy" state which could be useful where the tab contents start unmounted but remain mounted when opened and then closed #855 (reply in thread)

[salvadorgonmo]

Hi, just looping back on this. I saw you mentioned about the previous discussion as reference, but is there a conclusion over this request? Seems that both behavior are useful, so I can think of this as a prop like hasDestructiveBehavior being acting as flag, and then if the flag is enabled then the elements are going to be unmounted from the DOM, if not enabled simply hiding them but not removing them from the DOM.

Asking about this cause we are using this tabs and we have some text edit boxes implemented on our site that are placed over the tabs content that needs to retain its state if the other tab content is active, like when you are writing a big amount of text and it gets lost because of changing the tab. Happy to contribute to add this change if needed :)

Thanks in advance!