diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 12a75bd62e7..7d2c8752eaf 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -438,6 +438,10 @@ class Tabs extends Component { } else if (prevState.enableScrollButtons && !enableScrollButtons) { this.setState({ showScrollButtons: false }); } + + if (prevState.uncontrolledIsExpandedLocal !== this.state.uncontrolledIsExpandedLocal) { + this.setAccentStyles(true); + } } static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) { diff --git a/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx b/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx index 661e6407752..03fab0f6dbf 100644 --- a/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx +++ b/packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx @@ -1,4 +1,5 @@ import { render, screen, act } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Tabs } from '../Tabs'; import styles from '@patternfly/react-styles/css/components/Tabs/tabs'; import { Tab } from '../Tab'; @@ -50,6 +51,53 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when com jest.useRealTimers(); }); +test(`Renders with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component initially mounts`, async () => { + const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); + + render( + + + Tab Content + + + ); + + jest.useFakeTimers(); + await user.click(screen.getByRole('button', { name: 'Jump to section' })); + act(() => { + jest.advanceTimersByTime(100); + }); + expect(screen.getByRole('region')).toHaveClass(styles.modifiers.initializingAccent); + jest.useRealTimers(); +}); + +test(`Does not render with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component is finished mounting`, async () => { + const user = userEvent.setup(); + + render( + + + Tab Content + + + ); + + await user.click(screen.getByRole('button', { name: 'Jump to section' })); + expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent); +}); + test('should render simple tabs', () => { const { asFragment } = render( diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap index 450209dfcc9..26915039523 100644 --- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `