[Tabs] Scrollable tabs don't work on RTL mode

[Mood-al]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Hi guys I'm currentlly using v4 and when i switch to rtl scroll doesnt work when i click on the arrow i even noticed that same issue happening with the offecial doc of material
you can just switch to rtl and see the issue
https://v4.mui.com/components/tabs/

is there any way to fix this ? i even tried to switch to v5 and same issue

Expected behavior 🤔

No response

Steps to reproduce 🕹

Steps:

2.s
3.
4.
s

Context 🔦

No response

Your environment 🌎

No response

[danilo-leal]

Hey! Thanks for opening the issue. That is weird, it's working fine to me (video attached). To better investigate it, I think it's useful for you to leave more info about your setup (browser version, OS, etc)

tabs-scroll.mov

[Mood-al]

Hey! Thanks for opening the issue. That is weird, it's working fine to me (video attached). To better investigate it, I think it's useful for you to leave more info about your setup (browser version, OS, etc)

tabs-scroll.mov

Hi man thank you so much for replying on me

I just recorder this video and you can see it clearly this is exactly what is happening with me inside my project in LTR mode it's woking fine but in RTL it's not as you see

I'm going to show you a video and my code in another reply
this is the material-ui website that i tested the issue
https://v4.mui.com/components/tabs/#tabs

screencast-v4.mui.com-2021.12.16-00_13_19.mp4

my browser is chrome latest version my OS is windows 10

[danilo-leal]

@mnajdova or @siriwatknp any ideas on what's happening?!

[mnajdova]

@Mood-al looks like you are using v4. We do not actively work on it anymore. Can you try to reproduce with v5 (as far as I can see it works as expected)?

Also, looks like it works with v4 too (at least on the documentation - https://v4.mui.com/components/tabs/#scrollable-tabs) Make sure you follow this guide when configuring RTL - https://v4.mui.com/guides/right-to-left/

If this didn't help, please provide a codesandbox illustrating the issue.

[Mood-al]

@Mood-al looks like you are using v4. We do not actively work on it anymore. Can you try to reproduce with v5 (as far as I can see it works as expected)?

Also, looks like it works with v4 too (at least on the documentation - https://v4.mui.com/components/tabs/#scrollable-tabs) Make sure you follow this guide when configuring RTL - https://v4.mui.com/guides/right-to-left/

If this didn't help, please provide a codesandbox illustrating the issue.

Hi Marija thank you so much for replying on me
I'm going to try v5 but my issue is i have to convert my entire project to v5 plus v5 it has no styled component ssr support and my project is built on next js ssr and there is no jss rtl support like v4 so if i wanted to use it i have to use emotion and i really have no use for it i mean i will just use it for material ui so i really dont know how to use v5 without using emotion

about the v4 version i tried the website you gave me and i took this video same thing happening 😢

screencast-v4.mui.com-2021.12.22-21_09_37.mp4

thank you so much for helping me out ..
you guys are the best <3

[Mood-al]

Hi again

i created a new project in codesandbox using next js and mui v5 you can see it here
https://codesandbox.io/s/stupefied-borg-7u66f

as you see same issue is appearing now
do you have any idea how i can fix it?

[mnajdova]

Unfortunately, I cannot reproduce both in v4 and v5, and neither on the CodeSandbox. Do you have some system language settings different than English? Can you post the output from npx @mui/envinfo here?

[Mood-al]

Hi again
in my codesandbox example i just used v5 as you see and i used plain jss rtl settings and no i don't have any other system language
these are my envinfo if they help

[Mood-al]

I just wanted to say that in mui v5 tabs are working just fine at RTL mode
https://mui.com/components/tabs/#main-content
so i just did as you mentioned at mui v5 docs in my codesandbox example
as you see here https://codesandbox.io/s/stupefied-borg-7u66f / at _app.js file i did all the configrations for RTL
but it's not working at all as it expected i mean the scroll at rtl doesnt work at all
could you just check out my example at codesandbox and you can see that everything i did was exactly like the docs i really dont know what i did wrong this issue is tiring me i have trying to fix it a month ago and it seems it wont e fixed 😢

[mnajdova]

Are you using Edge? If yes, this is why we need more context to what you use. I will take a look tomorrow again if the is is the case

[Mood-al]

No I'm not I'm using chrome but when i ran npx @mui envinfo on vscode it showed edge because maybe they built it on tob of it

[Mood-al]

Why did you close it and so far the bug is in the library??

So far i didnt get any kind of solution from you and i dont even know how to fix this issue!!!

[mnajdova]

Please do not open new issues on the same matter. If you have a reproduction that we can take a look, or steps of how to reproduce it, leave a comment and re-open the issue.

So far, I haven't been able to reproduce it with any of the code snippets that you've shared. @hbjORbj can you re-validate too?

[Mood-al]

I made a codesandbox to reproduce the issue but it seems that you aren't able to see it
I'm going to add its link again and please tell me if you are able to see the example in codesandbox and see the bug

This is https://codesandbox.io/s/stupefied-borg-7u66f

And i deployed this example on vercel you can see it from here
https://mui-v5-rtl-tabs.vercel.app/

I opened another issue because it seemed that no one is able to help me here and as i see it's a bug and i tried to solve it but i couldn't

[Mood-al]

Hi again
I have noticed that the scroll works fine on RTL mode in firefox but in any chromium core browsers like Chrome or edge it doesnt
i really dont know why this happening but if you tried the deployed example on firefox it will work just fine on both RTL and LTR modes

[hbjORbj]

@mnajdova @Mood-al I can confirm that (1) tab scroll works well on v5 in RTL mode and (2) tab scroll doesn't work well on v4 in RTL mode. As Marija already mentioned, we do not work on v4 anymore. I suggest you to migrate to v5. Here is a migration guide from v4 to v5: https://mui.com/guides/migration-v4/

[Mood-al]

@mnajdova @Mood-al I can confirm that (1) tab scroll works well on v5 in RTL mode and (2) tab scroll doesn't work well on v4 in RTL mode. As Marija already mentioned, we do not work on v4 anymore. I suggest you to migrate to v5. Here is a migration guide from v4 to v5: https://mui.com/guides/migration-v4/

Hey there
I migrated to v5 as you see in this codesandbox example I'm using v5
https://codesandbox.io/s/stupefied-borg-7u66f

And here a deployed version of this example

https://mui-v5-rtl-tabs.vercel.app/

There is something i noticed that Tabs are working just fine on Firefox but once i use any kind of chromium core based browsers like chrome or edge it stops working on RTL
I'm using the latest version of chrome and edge
Is there any explanation why this is happening??

Can you try this example and see if same thing happens to you too?

[hbjORbj]

Hi, I am using Chrome.
You can see in the recording that it works fine on v5.

Screen.Recording.2021-12-28.at.11.34.59.mov

[Mood-al]

It's really odd i dont know why this is happening on my device
here is a video that i just recoded and as you see it doenst working

screencast-codesandbox.io-2021.12.28-14_46_11.mp4

[JoudiOth]

Hi there I'm facing the same issue with scrollable tabs on RTL
I tried @Mood-al example and it doesnt work on my device too I'm using window 10 pro with latest version of chrome
here is a video on my device.

New-Recording-12_28_2021_-11_37_52-PM.mp4

have anyone found any solution for this bug??

[hbjORbj]

No, it's difficult for Marija or myself to find a fix for this because we can't reproduce this. Would you be able to spend some time on figuring out the source of the error?

[Mood-al]

Here is the problem i couldn't find the error and why this is happening

What makes it difficult to find is that it works fine on Firefox but when it comes to chrome or edge it doesn't

[Mood-al]

I'm wondering on what OS did you try the codesandbox example ??
@mnajdova @hbjORbj
I have tried the example on 2 windows devices with diffrent specs and it doesnt work on both of them,
have you tried it on windows device or just macOS??

[abhinav-22-tech]

Hey, @hbjORbj I tried in my brother's PC it doesn't work properly.

Screen.Recording.12-31-2021.7-57-55.PM.mp4

There is a bug in this. I request you please re-open this issue.

[Mood-al]

Could you please reopen this issue? @hbjORbj?
There are three of us having this issue so it's a bug

[Mood-al]

@hbjORbj Hey man have anyone found a solution for this issue?

[hbjORbj]

@Mood-al Hey, I do not currently have the time to investigate into this as I have more important other tasks, and so does the other team members. This is relatively not a high-priority issue. We will look into it when we can for sure.

[github-actions]

Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed.
If you wish to see the issue reopened, please provide the missing information.

[benny-n]

Hi,
I'm having the exact same issue:

React.Tabs.component.-.MUI.-.Google.Chrome.2022-01-23.01-51-35.mp4

I'm using chrome with windows 10 OS.
I've also tried on Firefox, works just fine.
Like mentioned above, it seems to only break on chromium based browsers.
Are there any updates on this?

[Mood-al]

Hi, I'm having the exact same issue:

React.Tabs.component.-.MUI.-.Google.Chrome.2022-01-23.01-51-35.mp4
I'm using chrome with windows 10 OS. I've also tried on Firefox, works just fine. Like mentioned above, it seems to only break on chromium based browsers. Are there any updates on this?

I opened this issue 3 months ago i guess and despite many users have the same issue but it seems the Mui team didn't put this issue as priority I hope they start to debugg it the issue is there on all Material ui versions i tested them all and same thing is happening

If you tried to put your page zoom on 110% and then you refreshed the page the tabs will work fine on RTL mode

[OyX-Tech]

Hey guys did anyone find a solution for this bug ??
I'm having this issue too, the tabs work on firefox but on chrome or opera they dont as it's shown in the video

I have tried all material versions and same issue is appearing on scrollable tabs in rtl

my device is working on window 10 but i tried it on my friend's macbook and it works good

screencast-mui.com-2022.02.05-02_51_48.mp4

[OyX-Tech]

@hbjORbj @mnajdova @Mood-al can you reopen it again??

[Mood-al]

@hbjORbj Hey man thank you for reopen it.

I was wondering why there is no custom prev / next click functions so we can add our own buttons and I think this would solve the whole issue
Like adding new api to the tabs with two new functions one for prev and the another one for next and using them we can add some custom button with diffrent style
something like onPreviousBtnClick / onNextBtnClick

[hbjORbj]

Sorry for late response. I shared this issue with the team as I cannot reproduce the issue on my Mac.

I was wondering why there is no custom prev / next click functions so we can add our own buttons and I think this would solve the whole issue
Like adding new api to the tabs with two new functions one for prev and the another one for next and using them we can add some custom button with diffrent style

This seems to deserve a new issue.

[Mood-al]

Sorry for late response. I shared this issue with the team as I cannot reproduce the issue on my Mac.

I was wondering why there is no custom prev / next click functions so we can add our own buttons and I think this would solve the whole issue
Like adding new api to the tabs with two new functions one for prev and the another one for next and using them we can add some custom button with diffrent style

This seems to deserve a new issue.

I see this issue is really tricky and odd i tried it on many windows devices on some of them it works and on others it doesnt
I think if I could just get the click event of the previos and the next button everything would be sloved so i can disable Mui scroll buttons and use mine as i suggested if you could add a new Api to tabs with prev and next click events we can use our own buttons and it can be more flexible
because as you see the issue is when you are on RTL mode the prev button gets disabled
and Thank you so much for your reply 👍

[AliGharian]

I have the same issue in RTL mode and this issue is just in chrome for me and in edge it works well.

[Mood-al]

I have the same issue in RTL mode and this issue is just in chrome for me and in edge it works well.

Can you reproduce it and maybe record a video showing it.
I tried so much to fix it but it seems it doesn't work and the Mui couldnt do anything because they can't reproduce it on their devices it just happens on some windows devices and that what makes it so tricky i hope they just provide us with new api of the prev and next button click event with that we can avoid that and use our own btns i think the issue is with their calculations on rtl mode.

However I'm building a new react component just to replace the mui tabs with fully support of RTL mode
You can see it here so far i didnt publish it on Npm
https://react-tabs-scrollable.vercel.app

So far it has many small bugs i hope i can fix them and publish it on npm soon i just don't have that much time for it

[bakrDj]

Hey guys, I'm facing the same issue, I managed to overlook this issue when it came to mobile responsive as dragging will compensate this issue (in my case), but for full screen is a must, does anyone find a solution to this?

[Mood-al]

@hbjORbj Hey again
I was trying to search in the code inside Tabs.js component in this function

and i think the entire issue is happening inside the conditional elements for instanse i was trying to run this code and i found an issue with the condition because the scrollLeft value is a float so you should use something like this isRtl ? Math.ceil(scrollLeft.toFixed(2)) < scrollWidth - clientWidth - 1 : scrollLeft > 1;
plus i think the entire issue is happening inside this setState

[hbjORbj]

@Mood-al Since you can reproduce the error, would you be willing to work on this further and open a PR? Then other community members above who also can reproduce the error can test the issue on your PR.

[Mood-al]

Hey guys I'm going to close this issue
I built a react component and published it on npm if there anyone having the same problem
the component is fully customizable with many features

you can see the demo of it here https://react-tabs-scrollable.vercel.app

and here is the npm link of it https://www.npmjs.com/package/react-tabs-scrollable

[ehtishamsajjad]

I encountered a strange issue with tabs. In RTL, the arrows appeared in the opposite direction. I spent an entire day looking for a fix, as the tabs were displaying correctly in MUI examples. I solved the problem by changing the theme provider import from emotion to mui, which completely resolved the issue.

Before:
import { ThemeProvider } from "@emotion/react";

After:
import { ThemeProvider } from "@mui/material";

[tal952]

I faced +- the same issue, and the following solution was good enough for me:

<Tabs
  value={selectedTab}
  onChange={(e, value) => setSelectedTab(value)}
  variant="scrollable"
  scrollButtons
  allowScrollButtonsMobile
  TabScrollButtonProps={{ disabled: false }}
  sx={{
    flexDirection: "row-reverse",
  }}
>
  <Tab label="tab 1" />
  <Tab label="tab 2" />
  <Tab label="tab 3" />
  <Tab label="tab 4" />
  <Tab label="tab 5" />
  <Tab label="tab 6" />
</Tabs>

[3pleFly]

sx={{
flexDirection: "row-reverse",
}}

This partially works.
If you reach the end of the scroll, the wrong button is hidden. ( if you scroll to the end of left-side, then instead of left-side button vanishing and right showing, it's the opposite )