Closed
Description
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:
- Open the sidenav/drawer examples https://material.angular.io/components/sidenav/examples
- Open the first example in StackBlitz
- In
sidenav-autosize-example.htmladdposition="end"to<mat-drawer> - In
index.htmladddir="rtl"to the<html>, then reload StackBlitz's embedded browser (updating index.html doesn't auto-reload) - Click "Toggle sidenav" → it works fine, since the StackBlitz is initially on Angular Material
v19.0.0. - Now in the terminal stop the dev server (Ctrl+C), and run
ng update @angular/material(this will update tov19.1.2). - Now run
ng serveand click "Toggle sidenav" → it doesn't work
(bug was introduced inv19.0.5https://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:
This isn't the case in LTR (left-to-right), where transform: none is correctly applied when the drawer is opened:
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