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
- Render an EuiTabbedContent component with one set of tabs
- 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),
Describe the bug
The
EuiTabbedContentthrows a type error when thetabsprop 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
To Reproduce
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
tabsprop, a rerender is triggered, but the state ofselectedTabIdis not updated based on the new set of IDs, so thatfind()returnsundefined, and the type error is thrown when we try to accesscontent(here),