Tab: renderActiveOnly={false} does not render

[deilv]

trafficstars

Steps

I am trying render two components in two Tab Panes with renderActiveOnly={false}

Expected Result

Show two tabs which contain my two components.

Actual Result

Shows two tabs with proper labels and empty content.

Version

0.74.2

Testcase

https://codepen.io/deilv/pen/qPVKXb

Hint

If I change renderActiveOnly to {true} or in fact anything other than {false}, the panes render, though I guess the renderActiveOnly functionality is disabled.

[deilv]

After going through the documentation again and again, I finally realised that you can only use pane instead of render when renderActiveOnly={false}, but it's not properly documented.

[layershifter]

Tab will receive the breaking refactor soon. It will standartize API and remove render() fully. This is one of pre v1 that should be done.

[BillyWM]

This still wasn't very obvious from the docs, despite the "example with renderActiveOnly false" being provided. It's not clear that you can't pass panes the other object structure. The docs need to be explicit that this alternate syntax is mandatory. (Came here because I was having the same issue as @Deilv, despite reading the docs)

It also doesn't even work properly if you pass it anything but a literal Tab.Pane, but I'll file a different bug for that. (EDIT: #2176)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[imdzeeshan]

I used like const panes =[{ menuItem: 'Tab 1', pane: <Tab.Pane attached>...}] (without the arrow fn) and it worked

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[nik72619c]

Hi everyone, I tried checking out the documentation but could not find the rationale between when to use renderActiveOnly as false and when it should be true? Could someone give me clarity with an example around this prop usage? cc: @layershifter @deilv @BillyWM Thanks!

[nathanhannig]

From what I have tested.

renderActiveOnly=false requires the use of the pane property in the panes object. The Tab.Pane component needs to be within the same component and not a child component.

renderActiveOnly=true requires the use of the render property in the panes object. The Tab.Pane component can be in the child component.

This was confusing and a little frustrating to figure out why things were loading and not based on if renderActiveOnly was true vs false