From a859217f339cedfed5458f9407f639cfebb8e2c6 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 30 Apr 2024 10:15:07 +0200 Subject: [PATCH 1/2] fix(Tabs): uncontrolled Tabs react to updated defaultActiveKey --- .../react-core/src/components/Tabs/Tabs.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 7ec05827a3a..f25a44163f5 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -384,6 +384,23 @@ class Tabs extends React.Component { this.direction = getLanguageDirection(this.tabList.current); } + static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) { + const childrenHasTabWithActiveEventKey = React.Children.toArray(nextProps.children) + .filter((child): child is TabElement => React.isValidElement(child)) + .some(({ props }) => props.eventKey === prevState.uncontrolledActiveKey); + + // if uncontrolledActiveKey is an existing eventKey of any Tab of nextProps.children --> don't update uncontrolledActiveKey + if (childrenHasTabWithActiveEventKey) { + return null; + } + + // otherwise update state derived from nextProps.defaultActiveKey + return { + uncontrolledActiveKey: nextProps.defaultActiveKey, + shownKeys: nextProps.defaultActiveKey !== undefined ? [nextProps.defaultActiveKey] : [nextProps.activeKey] // only for mountOnEnter case + }; + } + render() { const { className, From a1c354098e070532df0161c778a46736ef6869a4 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 30 Apr 2024 14:25:45 +0200 Subject: [PATCH 2/2] fix(Tabs): update state only in uncontrolled tabs --- packages/react-core/src/components/Tabs/Tabs.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index f25a44163f5..05ee8e96987 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -385,6 +385,10 @@ class Tabs extends React.Component { } static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) { + if (prevState.uncontrolledActiveKey === undefined) { + return null; + } + const childrenHasTabWithActiveEventKey = React.Children.toArray(nextProps.children) .filter((child): child is TabElement => React.isValidElement(child)) .some(({ props }) => props.eventKey === prevState.uncontrolledActiveKey);