Skip to content

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

@daradermody

Description

@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),

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issuehelp wantedThe EUI team is unlikely prioritize. (Don't delete - used for automation)

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions