Skip to content
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

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

Open
ma7899 opened this issue Feb 3, 2025 · 1 comment
Open

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

ma7899 opened this issue Feb 3, 2025 · 1 comment
Assignees
@DiegoAndai
Labels
bug 🐛 Something doesn't work component: chip This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DiegoAndai DiegoAndai

Labels
bug 🐛 Something doesn't work component: chip This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mj12albert @DiegoAndai @ma7899