fix(timepicker): allowing better scroll on touchpads #6292 - 20.0 (#15875)

* fix(timepicker): allowing better scroll on touchpads #6292

* fix(pickers): adding logic for date editor/picker, slowing scroll down further

* test(date-picker): changing test to accommodate wheel accumulator

---------

Co-authored-by: Konstantin Dinev <[email protected]>

Author: ChronosSF

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts

@@ -1123,7 +1123,13 @@ describe('IgxDateTimeEditor', () => {
                 inputElement.triggerEventHandler('focus', {});
                 fixture.detectChanges();
                 dateTimeEditorDirective.nativeElement.setSelectionRange(1, 1);
-                inputElement.triggerEventHandler('wheel', new WheelEvent('wheel', { deltaY: 1 }));
+                // typical wheel scrolls are 120px and the date-editor employs touchpad-friendly implementation
+                // that accumulates to 50 before incrementing/decrementing
+                // we'll test the behavior by doing two scrolls with the first one not expected to trigger a change
+                inputElement.triggerEventHandler('wheel', new WheelEvent('wheel', { deltaY: 20 }));
+                fixture.detectChanges();
+                expect(dateTimeEditorDirective.value.getDate()).toEqual(today.getDate());
+                inputElement.triggerEventHandler('wheel', new WheelEvent('wheel', { deltaY: 40 }));
                 fixture.detectChanges();
                 expect(dateTimeEditorDirective.value.getDate()).toEqual(today.getDate() - 1);
             }));

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -228,7 +228,10 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     @Output()
     public validationFailed = new EventEmitter<IgxDateTimeEditorEventArgs>();
 
+
+    private readonly SCROLL_THRESHOLD = 50;
     private _inputFormat: string;
+    private _scrollAccumulator = 0;
     private _displayFormat: string;
     private _oldValue: Date;
     private _dateValue: Date;
@@ -313,10 +316,14 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
         }
         event.preventDefault();
         event.stopPropagation();
-        if (event.deltaY > 0) {
-            this.decrement();
-        } else {
-            this.increment();
+        this._scrollAccumulator += event.deltaY;
+        if (Math.abs(this._scrollAccumulator) > this.SCROLL_THRESHOLD) {
+            if (this._scrollAccumulator > 0) {
+                this.decrement();
+            } else {
+                this.increment();
+            }
+            this._scrollAccumulator = 0;
         }
     }
 

projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts

@@ -34,6 +34,14 @@ export class IgxItemListDirective implements OnInit, OnDestroy {
 
     public isActive: boolean;
 
+    private readonly SCROLL_THRESHOLD = 50;
+    private readonly PAN_THRESHOLD = 10;
+
+    /**
+     * accumulates wheel scrolls and triggers a change action above SCROLL_THRESHOLD
+     */
+    private scrollAccumulator = 0;
+
     constructor(
         @Inject(IGX_TIME_PICKER_COMPONENT) public timePicker: IgxTimePickerBase,
         private elementRef: ElementRef,
@@ -170,24 +178,35 @@ export class IgxItemListDirective implements OnInit, OnDestroy {
         event.preventDefault();
         event.stopPropagation();
 
-        const delta = event.deltaY;
-        if (delta !== 0) {
-            this.nextItem(delta);
+        this.scrollAccumulator += event.deltaY;
+        if (Math.abs(this.scrollAccumulator) > this.SCROLL_THRESHOLD) {
+            this.nextItem(this.scrollAccumulator);
+            this.scrollAccumulator = 0;
         }
     }
 
     /**
      * @hidden @internal
      */
     public ngOnInit() {
-        const hammerOptions: HammerOptions = { recognizers: [[HammerGesturesManager.Hammer?.Pan, { direction: HammerGesturesManager.Hammer?.DIRECTION_VERTICAL, threshold: 10 }]] };
+        const hammerOptions: HammerOptions = {
+            recognizers: [
+                [
+                    HammerGesturesManager.Hammer?.Pan,
+                    {
+                        direction: HammerGesturesManager.Hammer?.DIRECTION_VERTICAL,
+                        threshold: this.PAN_THRESHOLD
+                    }
+                ]
+            ]
+        };
         this.touchManager.addEventListener(this.elementRef.nativeElement, 'pan', this.onPanMove, hammerOptions);
     }
 
     /**
      * @hidden @internal
      */
-     public ngOnDestroy() {
+    public ngOnDestroy() {
         this.touchManager.destroy();
     }
 
@@ -355,7 +374,7 @@ export class IgxTimeItemDirective {
     private getHourPart(date: Date): string {
         const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.appliedFormat);
         const hourPart = inputDateParts.find(element => element.type === 'hours');
-        const ampmPart = inputDateParts.find(element =>element.format.indexOf('a') !== -1 || element.format === 'tt');
+        const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1 || element.format === 'tt');
         const hour = DateTimeUtil.getPartValue(date, hourPart, hourPart.format.length);
         if (ampmPart) {
             const ampm = DateTimeUtil.getPartValue(date, ampmPart, ampmPart.format.length);