Fix blur event and directionality bug

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,15 +141,13 @@ describe('MdSlider without forms', () => {
       expect(sliderNativeElement.classList).not.toContain('mat-slider-sliding');
     });
 
-    it('should remove focus after the slider is updated', () => {
-      spyOn(sliderNativeElement, 'blur');
+    it('should reset active state upon blur', () => {
+      sliderInstance._isActive = true;
 
-      expect(sliderNativeElement.blur).not.toHaveBeenCalled();
-
-      dispatchClickEventSequence(sliderNativeElement, 0.39);
+      dispatchFakeEvent(sliderNativeElement, 'blur');
       fixture.detectChanges();
 
-      expect(sliderNativeElement.blur).toHaveBeenCalled();
+      expect(sliderInstance._isActive).toBe(false);
     });
 
     it('should have thumb gap when at min value', () => {
@@ -969,6 +967,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

@@ -413,10 +413,20 @@ export class MdSlider extends _MdSliderMixinBase
     this._focusOriginMonitor
         .monitor(this._elementRef.nativeElement, renderer, true)
         .subscribe((origin: FocusOrigin) => this._isActive = !!origin && origin !== 'keyboard');
+    if (_dir) {
+      _dir.change.subscribe(() => this._changeDetectorRef.markForCheck());
+    }
   }
 
+  // ngAfterContentInit() {
+  //   this.change.asObservable().subscribe(() => this._changeDetectorRef.markForCheck());
+  // }
+
   ngOnDestroy() {
     this._focusOriginMonitor.stopMonitoring(this._elementRef.nativeElement);
+    if (this._dir) {
+      this._dir.change.unsubscribe();
+    }
   }
 
   _onMouseenter() {
@@ -445,7 +455,6 @@ export class MdSlider extends _MdSliderMixinBase
       this._emitInputEvent();
       this._emitChangeEvent();
     }
-    this._elementRef.nativeElement.blur();
   }
 
   _onSlide(event: HammerInput) {
@@ -507,6 +516,8 @@ export class MdSlider extends _MdSliderMixinBase
 
   _onBlur() {
     this.onTouched();
+    this._isActive = false;
+    this._changeDetectorRef.markForCheck();
   }
 
   _onKeydown(event: KeyboardEvent) {