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]

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]

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 :)