Merge pull request #14288 from IgniteUI/bpachilova/fix-14135

fix(slider): respect ngModelOptions.updateOn: blur - master

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';
@@ -1753,6 +1753,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();
@@ -1809,6 +1813,40 @@ 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.componentInstance.value = 0;
+            fixture.detectChanges();
+
+            const slider = fixture.componentInstance.slider;
+
+            const thumbEl = fixture.debugElement.query(By.css(THUMB_TAG)).nativeElement;
+            const { x: sliderX, width: sliderWidth } = thumbEl.getBoundingClientRect();
+            const startX = sliderX + sliderWidth / 2;
+
+            thumbEl.dispatchEvent(new Event('focus'));
+            fixture.detectChanges();
+
+            (slider as any).onPointerDown(new PointerEvent('pointerdown', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+            tick();
+
+            (slider as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX + 150 }));
+            fixture.detectChanges();
+            tick();
+
+            const activeThumb = fixture.debugElement.query(By.css(THUMB_TO_PRESSED_CLASS));
+            expect(activeThumb).not.toBeNull();
+            expect(fixture.componentInstance.value).not.toBeGreaterThan(0);
+
+            thumbEl.dispatchEvent(new Event('blur'));
+            fixture.detectChanges();
+            tick();
+
+            expect(fixture.componentInstance.value).toBeGreaterThan(0);
+        }));
     });
 
 
@@ -1984,7 +2022,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,
@@ -1993,6 +2031,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

@@ -991,13 +991,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);
         });
 
@@ -1078,7 +1078,6 @@ export class IgxSliderComponent implements
         // Finally do positionHandlersAndUpdateTrack the DOM
         // based on data values
         this.positionHandlersAndUpdateTrack();
-        this._onTouchedCallback();
     }
 
     /**
@@ -1411,14 +1410,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

@@ -66,6 +66,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>();
 
@@ -189,6 +192,7 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
         this.isActive = false;
         this.zIndex = 0;
         this.focused = false;
+        this.thumbBlur.emit();
     }
 
     @HostListener('focus')