Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom

bug(mat-drawer): mat-drawer position="end" is broken in RTL since v19.0.5 #30422

Closed
1 task done
anisabboud opened this issue Jan 30, 2025 · 0 comments · Fixed by #30427
Closed
1 task done

bug(mat-drawer): mat-drawer position="end" is broken in RTL since v19.0.5 #30422

anisabboud opened this issue Jan 30, 2025 · 0 comments · Fixed by #30427
Assignees
@crisbeto
Labels
area: material/sidenav P2 The issue is important to a large percentage of users, with a workaround

Comments

@anisabboud
Copy link

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

19.0.4

Description

<mat-drawer position="end"> is broken in RTL (right-to-left)

Reproduction

StackBlitz link: https://stackblitz.com/edit/gjdrwzbw?file=package.json,src%2Findex.html,src%2Fexample%2Fsidenav-autosize-example.html

Steps to reproduce:

  1. Open the sidenav/drawer examples https://material.angular.io/components/sidenav/examples
  2. Open the first example in StackBlitz
  3. In sidenav-autosize-example.html add position="end" to <mat-drawer>
  4. In index.html add dir="rtl" to the <html>, then reload StackBlitz's embedded browser (updating index.html doesn't auto-reload)
  5. Click "Toggle sidenav" → it works fine, since the StackBlitz is initially on Angular Material v19.0.0.
  6. Now in the terminal stop the dev server (Ctrl+C), and run ng update @angular/material (this will update to v19.1.2).
  7. Now run ng serve and click "Toggle sidenav" → it doesn't work
    (bug was introduced in v19.0.5 https://github.com/angular/components/pull/30235/files)

This is also reproducible on https://ng-comp-devapp.web.app/drawer (Switch to RTL → Click "Toggle End Side Drawer" → doesn't work.)

If you inspect the <mat-drawer> styles, you'll notice that this happens because the [rtl] styles are overriding the transform: none:

rtl styles overriding transform: none

This isn't the case in LTR (left-to-right), where transform: none is correctly applied when the drawer is opened:

ltr styles are fine

Expected Behavior

<mat-drawer> should work in RTL (right-to-left)

Actual Behavior

<mat-drawer position="end"> is broken in RTL (right-to-left)

Environment

  • Angular: 19.1.4
  • CDK/Material: 19.1.2
  • Browser(s): Chrome
@anisabboud anisabboud added the needs triage This issue needs to be triaged by the team label Jan 30, 2025
@crisbeto crisbeto self-assigned this Jan 31, 2025
@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround area: material/sidenav and removed needs triage This issue needs to be triaged by the team labels Jan 31, 2025
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 31, 2025
@crisbeto
fix(material/sidenav): end positioned sidenav not opening in RTL
77b6322 
Fixes a regression that happened when we switched the sidenav away from the animations module. The specificity of the selector that shows the sidenav was decreased which meant that the RTL styles were overriding it.

Fixes angular#30422.
@crisbeto crisbeto mentioned this issue Jan 31, 2025
Merged
crisbeto added a commit that referenced this issue Feb 2, 2025
@crisbeto
fix(material/sidenav): end positioned sidenav not opening in RTL (#30427
6d96869 
)

Fixes a regression that happened when we switched the sidenav away from the animations module. The specificity of the selector that shows the sidenav was decreased which meant that the RTL styles were overriding it.

Fixes #30422.

(cherry picked from commit 04ae202)
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@crisbeto crisbeto

Labels
area: material/sidenav P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/sidenav): end positioned sidenav not opening in RTL crisbeto/material2
2 participants
@crisbeto @anisabboud