fix(tree): opposite direction padding not being reset on change (#14816)

Fixes the left padding on a tree not being reset when going from LTR to RTL which causes a padding on both sides.

Author: crisbeto

src/cdk/tree/BUILD.bazel

@@ -26,6 +26,7 @@ ng_test_library(
     "@rxjs",
     "@rxjs//operators",
     "//src/cdk/collections",
+    "//src/cdk/bidi",
     ":tree",
   ],
 )

src/cdk/tree/padding.ts

@@ -67,8 +67,8 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
               private _element: ElementRef<HTMLElement>,
               @Optional() private _dir: Directionality) {
     this._setPadding();
-    if (this._dir) {
-      this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this._setPadding());
+    if (_dir) {
+      _dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this._setPadding());
     }
   }
 
@@ -87,9 +87,12 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
   }
 
   _setPadding() {
+    const element = this._element.nativeElement;
     const padding = this._paddingIndent();
     const paddingProp = this._dir && this._dir.value === 'rtl' ? 'paddingRight' : 'paddingLeft';
+    const resetProp = paddingProp === 'paddingLeft' ? 'paddingRight' : 'paddingLeft';
 
-    this._renderer.setStyle(this._element.nativeElement, paddingProp, padding);
+    this._renderer.setStyle(element, paddingProp, padding);
+    this._renderer.setStyle(element, resetProp, '');
   }
 }

src/cdk/tree/tree.spec.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
-import {Component, ViewChild, TrackByFunction, Type} from '@angular/core';
+import {Component, ViewChild, TrackByFunction, Type, EventEmitter} from '@angular/core';
 
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
+import {Directionality, Direction} from '@angular/cdk/bidi';
 import {combineLatest, BehaviorSubject, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
@@ -27,10 +28,15 @@ describe('CdkTree', () => {
   let dataSource: FakeDataSource;
   let treeElement: HTMLElement;
   let tree: CdkTree<TestData>;
+  let dir: {value: Direction, change: EventEmitter<Direction>};
 
   function configureCdkTreeTestingModule(declarations: Type<any>[]) {
     TestBed.configureTestingModule({
       imports: [CdkTreeModule],
+      providers: [{
+        provide: Directionality,
+        useFactory: () => dir = {value: 'ltr', change: new EventEmitter<Direction>()}
+      }],
       declarations: declarations,
     }).compileComponents();
   }
@@ -131,6 +137,23 @@ describe('CdkTree', () => {
           [`${data[2].pizzaTopping} - ${data[2].pizzaCheese} + ${data[2].pizzaBase}`]);
       });
 
+      it('should reset the opposite direction padding if the direction changes', () => {
+        const node = getNodes(treeElement)[0];
+
+        component.indent = 10;
+        fixture.detectChanges();
+
+        expect(node.style.paddingLeft).toBe('10px');
+        expect(node.style.paddingRight).toBeFalsy();
+
+        dir.value = 'rtl';
+        dir.change.emit('rtl');
+        fixture.detectChanges();
+
+        expect(node.style.paddingRight).toBe('10px');
+        expect(node.style.paddingLeft).toBeFalsy();
+      });
+
     });
 
     describe('with toggle', () => {
@@ -1011,8 +1034,8 @@ class FakeDataSource extends DataSource<TestData> {
   }
 }
 
-function getNodes(treeElement: Element): Element[] {
-  return [].slice.call(treeElement.querySelectorAll('.cdk-tree-node'))!;
+function getNodes(treeElement: Element): HTMLElement[] {
+  return Array.from(treeElement.querySelectorAll('.cdk-tree-node'));
 }
 
 function expectFlatTreeToMatch(treeElement: Element,