[TabScrollButton] Left, Right icons does not work as expected

[pratikkarad]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

The left, Right icons do not work as expected when we switch the theme direction to rtl

Expected behavior 🤔

As a user, I should be able to navigate through the left and right icons no matter what the value of direction is.

Steps to reproduce 🕹

Steps:

1. Visit codesandbox
2. Add dir="rtl" to Tabs component
3. Click on scroll button
4. User is not able to navigate between scrollable tabs

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

System:
  OS: Windows 10 10.0.19044
Binaries:
  Node: 17.8.0 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Chrome: Not Found
  Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.47)
npmPackages:
  @emotion/react: ^11.10.0 => 11.10.0
  @emotion/styled: ^11.10.0 => 11.10.0
  @mui/base:  5.0.0-alpha.92
  @mui/icons-material: ^5.8.4 => 5.8.4
  @mui/material: ^5.10.0 => 5.10.0
  @mui/private-theming:  5.9.3
  @mui/styled-engine:  5.10.0
  @mui/system:  5.10.0
  @mui/types:  7.1.5
  @mui/utils:  5.9.3
  @types/react:  18.0.15
  react: ^18.2.0 => 18.2.0
  react-dom: ^18.2.0 => 18.2.0
  typescript:  4.7.4

[Mark-777-0]

This does not happen on my end, dir="rtl" makes the default selected tab start on the right, and when it is not there the default selected tab is the leftmost one.

Maybe I am missing something? I can navigate through the tabs https://codesandbox.io/s/long-star-wu282z?file=/demo.tsx

I just used the same sandbox.

[pratikkarad]

This does not happen on my end, dir="rtl" makes the default selected tab start on the right, and when it is not there the default selected tab is the leftmost one.

Maybe I am missing something? I can navigate through the tabs https://codesandbox.io/s/long-star-wu282z?file=/demo.tsx

I just used the same sandbox.

Hey @Mark-777-0, are you able to scroll the tabs and see Item Seven in Tabs component when you switch to dir=rtl?

[mnajdova]

Have you followed https://mui.com/material-ui/guides/right-to-left/#main-content for setting up RTL?

[pratikkarad]

Yes, @mnajdova, I have followed all the steps from this rtl guide, but still, I was unable to navigate through tabs as expected.

[mnajdova]

Yes, @mnajdova, I have followed all the steps from this rtl guide, but still, I was unable to navigate through tabs as expected.

The codesandbox does not reflex this, please update it.

[pratikkarad]

After doing more research, it works in a very confusing way. Here's an example link for codesandbox We need to add the MUI theme and also need to add dir="rtl" prop to every component, we wish to change the direction. Initially, my understanding was to just use the MUI theme, but that is not the case.

[mnajdova]

@pratikkarad you are missing steps 3. and 4. from the Right-to-left guide.