diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts index dc416613062..eda74acff65 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts +++ b/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 = 15; + 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,9 +178,10 @@ 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; } } @@ -180,14 +189,24 @@ export class IgxItemListDirective implements OnInit, OnDestroy { * @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);