fix(slider): update styles when focus and dir change (#6700)

Author: jwshinjwshin

src/lib/slider/slider.spec.ts

@@ -16,7 +16,7 @@ import {
   UP_ARROW,
   BACKSPACE
 } from '../core/keyboard/keycodes';
-import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
+import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
 
 describe('MdSlider without forms', () => {
   let gestureConfig: TestGestureConfig;
@@ -141,6 +141,28 @@ describe('MdSlider without forms', () => {
       expect(sliderNativeElement.classList).not.toContain('mat-slider-sliding');
     });
 
+    it('should reset active state upon blur', () => {
+      sliderInstance._isActive = true;
+
+      dispatchFakeEvent(sliderNativeElement, 'blur');
+      fixture.detectChanges();
+
+      expect(sliderInstance._isActive).toBe(false);
+    });
+
+    it('should reset thumb gap when blurred on min value', () => {
+      sliderInstance._isActive = true;
+      sliderInstance.value = 0;
+      fixture.detectChanges();
+
+      expect(sliderInstance._thumbGap).toBe(10);
+
+      dispatchFakeEvent(sliderNativeElement, 'blur');
+      fixture.detectChanges();
+
+      expect(sliderInstance._thumbGap).toBe(7);
+    });
+
     it('should have thumb gap when at min value', () => {
       expect(trackFillElement.style.transform).toContain('translateX(-7px)');
     });
@@ -958,6 +980,24 @@ describe('MdSlider without forms', () => {
       expect(sliderInstance.value).toBe(30);
     });
 
+    it('should re-render slider with updated style upon directionality change', () => {
+      testComponent.dir = 'rtl';
+      fixture.detectChanges();
+
+      let initialTrackFillStyles = sliderInstance._trackFillStyles;
+      let initialTicksContainerStyles = sliderInstance._ticksContainerStyles;
+      let initialTicksStyles = sliderInstance._ticksStyles;
+      let initialThumbContainerStyles = sliderInstance._thumbContainerStyles;
+
+      testComponent.dir = 'ltr';
+      fixture.detectChanges();
+
+      expect(initialTrackFillStyles).not.toEqual(sliderInstance._trackFillStyles);
+      expect(initialTicksContainerStyles).not.toEqual(sliderInstance._ticksContainerStyles);
+      expect(initialTicksStyles).not.toEqual(sliderInstance._ticksStyles);
+      expect(initialThumbContainerStyles).not.toEqual(sliderInstance._thumbContainerStyles);
+    });
+
     it('should increment inverted slider by 1 on right arrow pressed', () => {
       testComponent.invert = true;
       fixture.detectChanges();

src/lib/slider/slider.ts

@@ -19,7 +19,7 @@ import {
   Output,
   Renderer2,
   ViewEncapsulation,
-  ViewChild,
+  ViewChild, OnInit,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
@@ -125,7 +125,7 @@ export const _MdSliderMixinBase = mixinColor(mixinDisabled(MdSliderBase), 'accen
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdSlider extends _MdSliderMixinBase
-    implements ControlValueAccessor, OnDestroy, CanDisable, CanColor {
+    implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, OnInit {
   /** Whether the slider is inverted. */
   @Input()
   get invert() { return this._invert; }
@@ -410,13 +410,25 @@ export class MdSlider extends _MdSliderMixinBase
               private _changeDetectorRef: ChangeDetectorRef,
               @Optional() private _dir: Directionality) {
     super(renderer, elementRef);
+  }
+
+  ngOnInit() {
     this._focusOriginMonitor
-        .monitor(this._elementRef.nativeElement, renderer, true)
-        .subscribe((origin: FocusOrigin) => this._isActive = !!origin && origin !== 'keyboard');
+        .monitor(this._elementRef.nativeElement, this._renderer, true)
+        .subscribe((origin: FocusOrigin) => {
+          this._isActive = !!origin && origin !== 'keyboard';
+          this._changeDetectorRef.detectChanges();
+        });
+    if (this._dir) {
+      this._dir.change.subscribe(() => this._changeDetectorRef.markForCheck());
+    }
   }
 
   ngOnDestroy() {
     this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
+    if (this._dir) {
+      this._dir.change.unsubscribe();
+    }
   }
 
   _onMouseenter() {