search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.73k stars 32.24k forks source link

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

Closed Mood-al closed 2 years ago

Mood-al commented 2 years ago

Duplicates

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/ image 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:

1. 2.s 3. 4. s

Context 🔦

No response

Your environment 🌎

No response

danilo-leal commented 2 years ago

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)

https://user-images.githubusercontent.com/67129314/146061858-9c91f9fe-b634-4195-aa83-1098b8101b98.mov

Mood-al commented 2 years ago

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

https://user-images.githubusercontent.com/63562308/146266331-8f3b679d-f067-45fb-a0c2-b6c125c39a4c.mp4

my browser is chrome latest version my OS is windows 10

danilo-leal commented 2 years ago

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

mnajdova commented 2 years ago

@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 commented 2 years ago

@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 😢

https://user-images.githubusercontent.com/63562308/147137366-ff9f6450-cba5-455b-8599-f722f607b2a1.mp4

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

Mood-al commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 image

Mood-al commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

https://user-images.githubusercontent.com/32841130/147562278-f29af6fb-0516-41be-8bff-72a6b4bd9104.mov

Mood-al commented 2 years ago

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

https://user-images.githubusercontent.com/63562308/147563333-be32013a-61bf-4644-83d5-8c6920b3b256.mp4

JoudiOth commented 2 years ago

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.

https://user-images.githubusercontent.com/96796187/147605639-9c2efcf2-6ea3-4c1d-bf07-b21536c4a029.mp4

have anyone found any solution for this bug??

hbjORbj commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@Mood-al It works fine in windows( chrome, edge, and firefox). Please try it in Private mode, Thank you

hbjORbj commented 2 years ago

@abhinav-22-tech Thanks for confirming.

@Mood-al Each of us uses Windows and Mac respectively, so I think this bug is specific to your device or environment.

Mood-al commented 2 years ago

Hey again guys @hbjORbj I noticed something when i sat my Page Zoom to 110% on chrome and then refreshed the page the tabs worked just fine on RTL mode like this video

https://user-images.githubusercontent.com/63562308/147795338-04605bf0-eb80-47c0-ba88-675a42567e04.mp4

do you have any thoughts about that?

about my device well i tried it on 5 devices the tabs worked on 2 of them on RTL mode and on my device and on the other two it didnt all of them have windows 10 installed i tested it on mac but it worked fine

@abhinav-22-tech I tested it on private mode but same thing happened to me it didnt work

abhinav-22-tech commented 2 years ago

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

https://user-images.githubusercontent.com/66718489/147828758-7bccbc28-d2d8-400b-8868-cbabe39c0283.mp4

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

Mood-al commented 2 years ago

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

Mood-al commented 2 years ago

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

hbjORbj commented 2 years ago

@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[bot] commented 2 years ago

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 commented 2 years ago

Hi, I'm having the exact same issue:

https://user-images.githubusercontent.com/66024037/150659223-8821dc9d-5869-4749-9963-656eb68a9688.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 commented 2 years ago

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 commented 2 years ago

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

https://user-images.githubusercontent.com/99055170/152618349-8f58d066-177a-41e7-add2-5f8c15423622.mp4

OyX-Tech commented 2 years ago

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

Mood-al commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

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 image

hbjORbj commented 2 years ago

@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 commented 2 years ago

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 commented 3 months ago

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";