Merge pull request #14292 from IgniteUI/bpachilova/fix-14135-16.1.x

fix(slider): respect ngModelOptions.updateOn: blur - 16.1.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { By, HammerModule } from '@angular/platform-browser';
@@ -1745,6 +1745,10 @@ describe('IgxSlider', () => {
             fakeDoc.documentElement.dir = 'rtl';
         });
 
+        afterEach(() => {
+            fakeDoc.documentElement.dir = 'ltr';
+        });
+
         it('should reflect on the right instead of the left css property of the slider handlers', () => {
             const fix = TestBed.createComponent(SliderRtlComponent);
             fix.detectChanges();
@@ -1801,6 +1805,31 @@ describe('IgxSlider', () => {
             fixture.detectChanges();
             expect(slider.value).toBe(formControl.value);
         });
+
+        it('Should respect the ngModelOptions updateOn: blur', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SliderTemplateFormComponent);
+            fixture.componentInstance.updateOn = 'blur';
+            fixture.detectChanges();
+            tick();
+
+            const slider = fixture.componentInstance.slider;
+            const thumb = fixture.nativeElement.querySelector('igx-thumb');
+
+            expect(slider.value).toBe(fixture.componentInstance.value);
+
+            thumb.dispatchEvent(new Event('focus'));
+            fixture.detectChanges();
+
+            slider.value = 30;
+            fixture.detectChanges();
+            tick();
+            expect(slider.value).not.toBe(fixture.componentInstance.value);
+
+            thumb.dispatchEvent(new Event('blur'));
+            fixture.detectChanges();
+            tick();
+            expect(slider.value).toBe(fixture.componentInstance.value);
+        }));
     });
 
     const panRight = (element, elementHeight, elementWidth, duration) => {
@@ -1991,7 +2020,7 @@ class RangeSliderWithCustomTemplateComponent {
 @Component({
     template: `
         <form #form="ngForm">
-            <igx-slider [(ngModel)]="value" name="amount"></igx-slider>
+            <igx-slider [(ngModel)]="value" name="amount" [ngModelOptions]="{ updateOn: updateOn }"></igx-slider>
         </form>
     `,
     standalone: true,
@@ -2000,6 +2029,8 @@ class RangeSliderWithCustomTemplateComponent {
 export class SliderTemplateFormComponent {
     @ViewChild(IgxSliderComponent, { read: IgxSliderComponent, static: true }) public slider: IgxSliderComponent;
 
+    @Input() public updateOn: 'change' | 'blur' | 'submit' = 'change';
+
     public value = 10;
 }
 

projects/igniteui-angular/src/lib/slider/slider.component.ts

@@ -1033,13 +1033,13 @@ export class IgxSliderComponent implements
         this.setTickInterval();
         this.changeThumbFocusableState(this.disabled);
 
-        this.subscribeTo(this.thumbFrom, this.thumbChanged.bind(this));
-        this.subscribeTo(this.thumbTo, this.thumbChanged.bind(this));
+        this.subscribeToEvents(this.thumbFrom);
+        this.subscribeToEvents(this.thumbTo);
 
         this.thumbs.changes.pipe(takeUntil(this._destroyer$)).subscribe(change => {
             const thumbFrom = change.find((thumb: IgxSliderThumbComponent) => thumb.type === SliderHandle.FROM);
             this.positionHandler(thumbFrom, null, this.lowerValue);
-            this.subscribeTo(thumbFrom, this.thumbChanged.bind(this));
+            this.subscribeToEvents(thumbFrom);
             this.changeThumbFocusableState(this.disabled);
         });
 
@@ -1115,7 +1115,6 @@ export class IgxSliderComponent implements
         // Finally do positionHandlersAndUpdateTrack the DOM
         // based on data values
         this.positionHandlersAndUpdateTrack();
-        this._onTouchedCallback();
     }
 
     /**
@@ -1412,14 +1411,18 @@ export class IgxSliderComponent implements
         }
     }
 
-    private subscribeTo(thumb: IgxSliderThumbComponent, callback: (a: number, b: string) => void) {
+    private subscribeToEvents(thumb: IgxSliderThumbComponent) {
         if (!thumb) {
             return;
         }
 
         thumb.thumbValueChange
             .pipe(takeUntil(this.unsubscriber(thumb)))
-            .subscribe(value => callback(value, thumb.type));
+            .subscribe(value => this.thumbChanged(value, thumb.type));
+
+        thumb.thumbBlur
+            .pipe(takeUntil(this.unsubscriber(thumb)))
+            .subscribe(() => this._onTouchedCallback());
     }
 
     private unsubscriber(thumb: IgxSliderThumbComponent) {

projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts

@@ -65,6 +65,9 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
     @Output()
     public thumbChange = new EventEmitter<any>();
 
+    @Output()
+    public thumbBlur = new EventEmitter<void>();
+
     @Output()
     public hoverChange = new EventEmitter<boolean>();
 
@@ -188,6 +191,7 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
         this.isActive = false;
         this.zIndex = 0;
         this.focused = false;
+        this.thumbBlur.emit();
     }
 
     @HostListener('focus')