diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.tsx b/src/components/tabs/tabbed_content/tabbed_content.test.tsx index 79522ff9e42..c809b6842df 100644 --- a/src/components/tabs/tabbed_content/tabbed_content.test.tsx +++ b/src/components/tabs/tabbed_content/tabbed_content.test.tsx @@ -121,5 +121,32 @@ describe('EuiTabbedContent', () => { ); expect(getAllByRole('tab')[1]).toHaveAttribute('aria-selected', 'true'); }); + + it('resets the selected tab to the first if the `tabs` content completely changes', () => { + const { rerender, getAllByRole, getByTestSubject } = render( + + ); + + fireEvent.click(getByTestSubject('kibanaTab')); + expect(getAllByRole('tab')[1]).toHaveAttribute('aria-selected', 'true'); + + rerender( + Hello

, + }, + { + id: 'world', + name: 'New tab 2', + content:

World

, + }, + ]} + /> + ); + expect(getAllByRole('tab')[0]).toHaveAttribute('aria-selected', 'true'); + }); }); }); diff --git a/src/components/tabs/tabbed_content/tabbed_content.tsx b/src/components/tabs/tabbed_content/tabbed_content.tsx index 4ed1f74727c..d8f4c736825 100644 --- a/src/components/tabs/tabbed_content/tabbed_content.tsx +++ b/src/components/tabs/tabbed_content/tabbed_content.tsx @@ -137,19 +137,6 @@ export class EuiTabbedContent extends Component< } }; - static getDerivedStateFromProps( - nextProps: EuiTabbedContentProps, - currentState: EuiTabbedContentState - ) { - if (!nextProps.tabs?.find((tab) => tab.id === currentState.selectedTabId)) { - return { - ...currentState, - selectedTabId: nextProps?.tabs[0]?.id, - }; - } - return null; - } - render() { const { className, @@ -168,9 +155,10 @@ export class EuiTabbedContent extends Component< externalSelectedTab || tabs.find( (tab: EuiTabbedContentTab) => tab.id === this.state.selectedTabId - ); + ) || + tabs[0]; // Fall back to the first tab if a selected tab can't be found - const { content: selectedTabContent, id: selectedTabId } = selectedTab!; + const { content: selectedTabContent, id: selectedTabId } = selectedTab; return (