diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.js index acadf974feae16..08afed977c2e69 100644 --- a/packages/mui-material/src/TabScrollButton/TabScrollButton.js +++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.js @@ -110,7 +110,7 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref) }), }} > - {direction === 'left' ? ( + {(direction === 'left') !== isRtl ? ( ) : ( diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js index bb73ff3c324b22..b9bc5642c3c911 100644 --- a/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js +++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js @@ -1,7 +1,9 @@ +import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, screen } from '@mui/internal-test-utils'; import TabScrollButton, { tabScrollButtonClasses as classes } from '@mui/material/TabScrollButton'; import { createSvgIcon } from '@mui/material/utils'; +import RtlProvider from '@mui/system/RtlProvider'; import describeConformance from '../../test/describeConformance'; const ArrowBackIcon = createSvgIcon(, 'ArrowBack'); @@ -81,4 +83,34 @@ describe('', () => { expect(screen.getAllByTestId('ArrowForwardIcon')).to.have.lengthOf(1); }); + + describe('RTL', () => { + it('should render StartScrollButtonIcon for direction="right" in RTL', () => { + render( + + + , + ); + expect(screen.getAllByTestId('ArrowBackIcon')).to.have.lengthOf(1); + }); + + it('should render EndScrollButtonIcon for direction="left" in RTL', () => { + render( + + + , + ); + expect(screen.getAllByTestId('ArrowForwardIcon')).to.have.lengthOf(1); + }); + }); });