[EuiTabbedContent] TypeError: Cannot read property 'content' of undefined

[daradermody]

Describe the bug
The EuiTabbedContent throws a type error when the tabs prop changes to a new (and different) list of tabs.

Impact and severity
Low impact because the workaround is easy. Adding key={uniqueStringAssociatedWithTabsList} causes the component to remount and therefore reinitialize its state based on the new tabs list.

Environment and versions

• EUI version: 91.0.0
• React version: 18.2.0
• Browser: Chrome 117.0.5938.149
• Operating System: Ubuntu 22.04.3

To Reproduce

1. Render an EuiTabbedContent component with one set of tabs
2. Cause a rerender that then uses another different set of tabs

Expected behavior
Tabs should refresh to be the new ones, and the first tab is selected.

Minimum reproducible sandbox
https://codesandbox.io/s/reactjs-playground-forked-f2ysd2

Additional context
Found this similar bug, but didn't seem to be the exact same issue.

The issue is caused by the fact that the selected tab ID is stored in state and is initalised on construction of the component based on the props of the first render (here). During the first render, it's used to fetch the appropriate tab from the tabs list (here). However, when we change the tabs prop, a rerender is triggered, but the state of selectedTabId is not updated based on the new set of IDs, so that find() returns undefined, and the type error is thrown when we try to access content (here),

[github-actions]

👋 Thank you for your suggestion or request! While the EUI team agrees that it's valid, it's unlikely that we will prioritize this issue on our roadmap. We'll leave the issue open if you or anyone else in the community wants to implement it by contributing to EUI. If not, this issue will auto close in one year.

Log | Bot Usage

[tkajtoch]

Thanks for reporting this and including so many helpful details! I was able to reproduce it locally.

Replacing tabs in the runtime is pretty unusual, and I agree it has a low impact. We'll try to implement a fix soon, but we're happy to accept community contributions on this in the meantime!

[tkajtoch]

We're not planning to work on this bug in the near future. It's an edge case, and there's a workaround available. As always, community contributions are welcome!