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(
+
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 (