Skip to content

[Chip] Adornments are misaligned when using RTL partially #45193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
ma7899 opened this issue Feb 3, 2025 · 9 comments · May be fixed by #45330
Closed

[Chip] Adornments are misaligned when using RTL partially #45193

ma7899 opened this issue Feb 3, 2025 · 9 comments · May be fixed by #45330
Assignees
@DiegoAndai @solomonalem
Labels
component: chip This is the name of the generic UI component, not the React module! out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future) support: question Community support but can be turned into an improvement

Comments

@ma7899
Copy link

ma7899 commented Feb 3, 2025 •
edited by mj12albert
Loading

Repro:

https://codesandbox.io/p/sandbox/confident-driscoll-24gvrz?file=%2Fsrc%2FApp.js%3A1%2C1

Steps to reproduce

  1. Configure RTL based on this doc and apply dir="rtl" to part of the app
  2. Chips with adornments (e.g. deletable, avatar, icon) placed in the LTR region are misaligned

Image

Current behavior

when the direction of a parent is RTL the chips content is disrupted and the places are not correct.
specially on Delete.

Expected behavior

It has to be well alligned.

Context

I am using chip in RTL website.

Your environment

npx @mui/envinfo 
  I am using Chrome.
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "^5.0.0",
    "@mui/material": "6.4.1",
    "@emotion/styled": "11.14.0",
    "@emotion/react": "11.14.0"

Search keywords: RTL Chip Bug
@ma7899 ma7899 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 3, 2025
@mj12albert mj12albert added component: chip This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material labels Feb 4, 2025
@mj12albert mj12albert changed the title Chips are not well aligned on RTL [Chip] Chips are not well aligned on RTL Feb 4, 2025
@mj12albert mj12albert changed the title [Chip] Chips are not well aligned on RTL [Chip] Adornments are misaligned when using using RTL partially Feb 4, 2025
@mj12albert mj12albert added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 4, 2025
@mj12albert
Copy link
Member

mj12albert commented Feb 4, 2025 •
edited
Loading

Thanks for reporting this @ma7899 ~ the example in your sandbox didn't do the RTL setup, it's documented here: https://mui.com/material-ui/customization/right-to-left/#setup

If your project is 100% RTL (i.e. you will set dir="rtl" on the <html> tag) then RTL Chips seem fine, here's a working sandbox: https://codesandbox.io/p/sandbox/confident-driscoll-24gvrz?file=%2Fsrc%2FApp.js%3A1%2C1

However I noticed a related bug where if RTL is set partially, chips placed in the LTR parts are misaligned so I've updated the issue description

@mj12albert mj12albert added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Feb 4, 2025
@mj12albert mj12albert changed the title [Chip] Adornments are misaligned when using using RTL partially [Chip] Adornments are misaligned when using RTL partially Feb 4, 2025
@DiegoAndai DiegoAndai self-assigned this Feb 6, 2025
@ma7899
Copy link
Author

ma7899 commented Feb 11, 2025

Can someone fix it ?
doesnt seem to be really hard.

@mj12albert
Copy link
Member

mj12albert commented Feb 12, 2025 •
edited
Loading

Can someone fix it ?
doesnt seem to be really hard.

Are you interested in creating a PR? 😬 If so we can guide you ~
https://github.com/mui/material-ui/blob/master/CONTRIBUTING.md

@solomonalem
Copy link

@mj12albert I will work on it.

@solomonalem solomonalem mentioned this issue Feb 17, 2025
Open
1 task
@alisasanib
Copy link
Contributor

@solomonalem Are you still working on this issue? If not I am more than happy to work on it

@alisasanib alisasanib mentioned this issue Mar 25, 2025
Closed
1 task
@mnajdova
Copy link
Member

I would honestly not accept the issue, there are probably bunch of issues if RTL is partially set up. Even if RTL is not used on the whole page, developers can add dir="rtl" on the wrapping element where it is used, e.g. https://codesandbox.io/p/devbox/relaxed-kowalevski-24gvrz-forked-69gltc?workspaceId=ws_LCQafiBEJ7ynffHYRMAZL.

@alisasanib I am happy to accept the PR as it is anyway an improvement, but if we decide to do it, we should do it for all components. I would first recommend investigating if that will improve the overall workflow for setting up RTL, as from the investigations we did in Base UI, developers will probably always need to apply both the dir="rtl" and some RTL context anyways.

@alisasanib
Copy link
Contributor

@mnajdova You're absolutely right — both dir="rtl" and RTL context via the theme are necessary. The issue arises when users try to mix RTL and LTR components within the same application and only partially configure the direction. In such cases, styling can break or behave unexpectedly due to hardcoded directional values. While this can technically be resolved by wrapping sections of the app in separate ThemeProviders using different createTheme configurations, it might not always be intuitive(maybe the reason this issue was reported in the first place).

This issue becomes noticeable when a user adds dir="rtl" to part of the application and expects the rest of the app — which was previously working in LTR — to remain unaffected. In these cases, layout issues may start to appear in components that rely on hardcoded left/right styles.

To address your point — while this change may not dramatically improve the global RTL setup workflow, it does make it easier for users to apply directionality on a per-section basis without unintended side effects.

I'd be more than happy to look into other components where similar directional styling might cause issues. I can provide reproducible examples along with potential solutions. From there, we can evaluate whether it's worth addressing these inconsistencies and how we might prioritize improvements.

Please let me know if you're happy with this approach and whether you consider this a bug worth fixing and addressing.

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 29, 2025 •
edited
Loading

Closing, we don't support "partial RTL configuration". See https://mui.com/material-ui/customization/right-to-left/.

One thing that could be interesting to do is to put in place better failure recovery logic. Maybe there is a way to log an error message when this is wrongly configured. But this would likely involve: reading the DOM, seeing the mismatch, and flagging. For 2% of the user base, I suspect that it's not worth the runtime slowness in dev mode. So there isn't much we can do.

As for using logical CSS properties, this seems to make things even worse: #45679 (comment).

@oliviertassinari oliviertassinari added out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future) and removed ready to take Help wanted. Guidance available. There is a high chance the change will be accepted labels Mar 29, 2025
@github-actions GitHub Actions
Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@oliviertassinari oliviertassinari added support: question Community support but can be turned into an improvement and removed bug 🐛 Something doesn't work package: material-ui Specific to @mui/material labels Mar 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DiegoAndai DiegoAndai

@solomonalem solomonalem

Labels
component: chip This is the name of the generic UI component, not the React module! out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future) support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
7 participants
@oliviertassinari @mnajdova @mj12albert @DiegoAndai @alisasanib @ma7899 @solomonalem