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

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

Open
1 task done
anisabboud opened this issue Jan 30, 2025 · 0 comments
Open
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
Labels
needs triage This issue needs to be triaged by the team

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs triage This issue needs to be triaged by the team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@anisabboud