diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts index 3bdeff346d13..676929861740 100644 --- a/src/lib/slider/slider.spec.ts +++ b/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(); diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 701c08b3396c..e794e1f4575a 100644 --- a/src/lib/slider/slider.ts +++ b/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() {