diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 5781894ac37..ea37e047675 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -63,10 +63,14 @@ export interface TabsProps extends Omit { static displayName = 'Tabs'; tabList = React.createRef(); leftScrollButtonRef = React.createRef(); + private direction = 'ltr'; constructor(props: TabsProps) { super(props); this.state = { enableScrollButtons: false, showScrollButtons: false, renderScrollButtons: false, - disableLeftScrollButton: true, - disableRightScrollButton: true, + disableBackScrollButton: true, + disableForwardScrollButton: true, shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case uncontrolledActiveKey: this.props.defaultActiveKey, uncontrolledIsExpandedLocal: this.props.defaultIsExpanded, @@ -177,7 +182,9 @@ class Tabs extends React.Component { isBox: false, hasNoBorderBottom: false, leftScrollAriaLabel: 'Scroll left', + backScrollAriaLabel: 'Scroll back', rightScrollAriaLabel: 'Scroll right', + forwardScrollAriaLabel: 'Scroll forward', component: TabsComponent.div, mountOnEnter: false, unmountOnExit: false, @@ -232,8 +239,8 @@ class Tabs extends React.Component { clearTimeout(this.scrollTimeout); this.scrollTimeout = setTimeout(() => { const container = this.tabList.current; - let disableLeftScrollButton = true; - let disableRightScrollButton = true; + let disableBackScrollButton = true; + let disableForwardScrollButton = true; let enableScrollButtons = false; let overflowingTabCount = 0; @@ -246,8 +253,8 @@ class Tabs extends React.Component { enableScrollButtons = overflowOnLeft || overflowOnRight; - disableLeftScrollButton = !overflowOnLeft; - disableRightScrollButton = !overflowOnRight; + disableBackScrollButton = !overflowOnLeft; + disableForwardScrollButton = !overflowOnRight; } if (isOverflowHorizontal) { @@ -256,14 +263,14 @@ class Tabs extends React.Component { this.setState({ enableScrollButtons, - disableLeftScrollButton, - disableRightScrollButton, + disableBackScrollButton, + disableForwardScrollButton, overflowingTabCount }); }, 100); }; - scrollLeft = () => { + scrollBack = () => { // find first Element that is fully in view on the left, then scroll to the element before it if (this.tabList.current) { const container = this.tabList.current; @@ -278,12 +285,18 @@ class Tabs extends React.Component { } } if (lastElementOutOfView) { - container.scrollLeft -= lastElementOutOfView.scrollWidth; + if (this.direction === 'ltr') { + // LTR scrolls left to go back + container.scrollLeft -= lastElementOutOfView.scrollWidth; + } else { + // RTL scrolls right to go back + container.scrollLeft += lastElementOutOfView.scrollWidth; + } } } }; - scrollRight = () => { + scrollForward = () => { // find last Element that is fully in view on the right, then scroll to the element after it if (this.tabList.current) { const container = this.tabList.current as any; @@ -297,7 +310,13 @@ class Tabs extends React.Component { } } if (firstElementOutOfView) { - container.scrollLeft += firstElementOutOfView.scrollWidth; + if (this.direction === 'ltr') { + // LTR scrolls right to go forward + container.scrollLeft += firstElementOutOfView.scrollWidth; + } else { + // RTL scrolls left to go forward + container.scrollLeft -= firstElementOutOfView.scrollWidth; + } } } }; @@ -314,6 +333,7 @@ class Tabs extends React.Component { if (canUseDOM) { window.addEventListener('resize', this.handleScrollButtons, false); } + this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction'); // call the handle resize function to check if scroll buttons should be shown this.handleScrollButtons(); } @@ -360,6 +380,8 @@ class Tabs extends React.Component { } else if (prevState.enableScrollButtons && !enableScrollButtons) { this.setState({ showScrollButtons: false }); } + + this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction'); } render() { @@ -376,6 +398,8 @@ class Tabs extends React.Component { hasNoBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, + backScrollAriaLabel, + forwardScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, @@ -400,8 +424,8 @@ class Tabs extends React.Component { const { showScrollButtons, renderScrollButtons, - disableLeftScrollButton, - disableRightScrollButton, + disableBackScrollButton, + disableForwardScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal, @@ -497,10 +521,10 @@ class Tabs extends React.Component {