Bug - Tabs - Tabs With separate content can not have activeKey different than the first one

[carlosthe19916]

Describe the problem The Tab definition can be something like:

<Tabs activeKey={activeTabKey}

And the problem is that activeKey can not point to the second, third, fourth, etc. tab as the first time the Tab content is rendered, the tab content will always render the FIRST tab content.

Important to notice is that this problem only happens when the tab is With separate content e.g. https://www.patternfly.org/components/tabs#with-separate-content

How do you reproduce the problem? Here is a codesandbox demonstrating the problem.

The code above will have:

• The second tab selected
• But rendering the content of the first tab. So here is the discrepancy

Expected behavior If the default activeKey is set to any value, then the tab content should render the appropriate content.

Is this issue blocking you?

Screenshots If applicable, add screenshots to help explain the issue.

What is your environment?

• OS: Fedora 40
• Browser: Chrome
• Version: 130

What is your product and what release date are you targeting?

Any other information?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[carlosthe19916]

I don't think this should be marked as "won't fix" but I'll verify whether or not this bug is still there

[thatblindgeye]

@carlosthe19916 can you confirm if this is still an issue? In interacting with both the PF example and codesandbox you provided, and trying the v5 Tabs example, things seem to work fine for me.

[carlosthe19916]

@thatblindgeye I verified and the bug is still there

• PF 6 codesandbox: https://codesandbox.io/p/sandbox/vigilant-fire-mzcvjf?workspaceId=ws_JT5i8tC5QLevy3yVJPHU9e
• PF 5 codesandbox: https://codesandbox.io/p/sandbox/sharp-torvalds-w69rg9?workspaceId=ws_JT5i8tC5QLevy3yVJPHU9e

Steps to reproduce.

• Open the codesanboxes
• Open the index.tsx file and notice that the default active Tab Key is 1

const [activeTabKey, setActiveTabKey] = React.useState<string | number>(1);

• The problem is that what is rendered is the content of that Tab Key 0 rather an 1

<TabContent
          eventKey={0}
          id="refTab1Section"
          ref={contentRef1}
          aria-label="This is content for the first separate content tab"
        >
          Tab 1 section
        </TabContent>
        <TabContent
          eventKey={1}
          id="refTab2Section"
          ref={contentRef2}
          aria-label="This is content for the second separate content tab"
          hidden
        >
          Tab 2 section
        </TabContent>
        <TabContent
          eventKey={2}
          id="refTab3Section"
          ref={contentRef3}
          aria-label="This is content for the third separate content tab"
          hidden
        >
          Tab 3 section
        </TabContent>

[thatblindgeye]

Ah gotcha, I see what you mean and can reproduce this, thanks for bringing this up!

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[carlosthe19916]

Please don't close it, this is a reproducible issue, we need a bit more patience :)

[thatblindgeye]

No worries @carlosthe19916 , we've updated the bot so it won't auto-close issues due to staleness anymore. It just serves as a reminder for us to check whether issues are still applicable/planned/etc. Keeping this open and just removed the stale label so we can look into this further

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[rebeccaalpert]

I think the intent of separate content is for initial state to be managed via the hidden property on TabContent.

The examples have the following:

<div>
        <TabContent
          eventKey={0}
          id="refTab1Section"
          ref={contentRef1}
          aria-label="This is content for the first separate content tab"
        >
          Tab 1 section
        </TabContent>
        <TabContent
          eventKey={1}
          id="refTab2Section"
          ref={contentRef2}
          aria-label="This is content for the second separate content tab"
          hidden
        >
          Tab 2 section
        </TabContent>
        <TabContent
          eventKey={2}
          id="refTab3Section"
          ref={contentRef3}
          aria-label="This is content for the third separate content tab"
          hidden
        >
          Tab 3 section
        </TabContent>
      </div>

While the activeTabKey was adjusted in the provided examples, you must also adjust the hidden attributes on the TabContent to reflect the active tab key. The Tabs component seems to correctly manage the state after that. I can adjust the docs and add some tests to make this clearer.