fix(drawer): margins not being updated on direction changes (#9161)

Fixes the `mat-drawer-container` margins not being updated when its directionality has changed. Fixes #9158.
angular · Jan 4, 2018 · ff1c5f1 · ff1c5f1
1 parent 9e47d40
commit ff1c5f1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts
@@ -10,6 +10,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatDrawer, MatSidenavModule, MatDrawerContainer} from './index';
+import {Direction} from '@angular/cdk/bidi';
 import {A11yModule} from '@angular/cdk/a11y';
 import {PlatformModule} from '@angular/cdk/platform';
 import {ESCAPE} from '@angular/cdk/keycodes';
@@ -573,6 +574,27 @@ describe('MatDrawerContainer', () => {
     expect(parseInt(contentElement.style.marginLeft)).toBeLessThan(initialMargin);
   }));
 
+  it('should recalculate the margin if the direction has changed', fakeAsync(() => {
+    const fixture = TestBed.createComponent(DrawerContainerStateChangesTestApp);
+
+    fixture.detectChanges();
+    fixture.componentInstance.drawer.open();
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    const contentElement = fixture.debugElement.nativeElement.querySelector('.mat-drawer-content');
+    const margin = parseInt(contentElement.style.marginLeft);
+
+    expect(margin).toBeGreaterThan(0);
+
+    fixture.componentInstance.direction = 'rtl';
+    fixture.detectChanges();
+
+    expect(parseInt(contentElement.style.marginLeft)).toBe(0);
+    expect(parseInt(contentElement.style.marginRight)).toBe(margin);
+  }));
+
   it('should not animate when the sidenav is open on load ', fakeAsync(() => {
     const fixture = TestBed.createComponent(DrawerSetToOpenedTrue);
 
@@ -760,14 +782,15 @@ class DrawerDelayed {
 
 @Component({
   template: `
-    <mat-drawer-container>
+    <mat-drawer-container [dir]="direction">
       <mat-drawer *ngIf="renderDrawer" [mode]="mode" style="width:100px"></mat-drawer>
     </mat-drawer-container>`,
 })
 class DrawerContainerStateChangesTestApp {
   @ViewChild(MatDrawer) drawer: MatDrawer;
   @ViewChild(MatDrawerContainer) drawerContainer: MatDrawerContainer;
 
+  direction: Direction = 'ltr';
   mode = 'side';
   renderDrawer = true;
 }

diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts
@@ -475,10 +475,14 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
               private _ngZone: NgZone,
               private _changeDetectorRef: ChangeDetectorRef,
               @Inject(MAT_DRAWER_DEFAULT_AUTOSIZE) defaultAutosize = false) {
-    // If a `Dir` directive exists up the tree, listen direction changes and update the left/right
-    // properties to point to the proper start/end.
-    if (_dir != null) {
-      _dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this._validateDrawers());
+
+    // If a `Dir` directive exists up the tree, listen direction changes
+    // and update the left/right properties to point to the proper start/end.
+    if (_dir) {
+      _dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        this._validateDrawers();
+        this._updateContentMargins();
+      });
     }
 
     this._autosize = defaultAutosize;
@@ -619,7 +623,7 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
     this._right = this._left = null;
 
     // Detect if we're LTR or RTL.
-    if (this._dir == null || this._dir.value == 'ltr') {
+    if (!this._dir || this._dir.value == 'ltr') {
       this._left = this._start;
       this._right = this._end;
     } else {