fix(scrollInertia): mixed wheel delta issues with MAC touchpad #2873 (#2895)

Author: ChronosSF

projects/igniteui-angular/src/lib/directives/for-of/display.container.ts

@@ -8,12 +8,21 @@ import {
 
 @Component({
     selector: 'igx-display-container',
-    template: '<ng-template #display_container igxScrollInertia [IgxScrollInertiaScrollContainer]="scrollContainer"></ng-template>'
+    template: `
+        <ng-template
+            #display_container
+            igxScrollInertia
+            [IgxScrollInertiaScrollContainer]="scrollContainer"
+            [IgxScrollInertiaDirection]="scrollDirection">
+        </ng-template>
+    `
 })
 export class DisplayContainerComponent {
     @ViewChild('display_container', { read: ViewContainerRef })
     public _vcr;
 
+    public scrollDirection: string;
+
     @HostBinding('class')
     public cssClass = 'igx-display-container';
 

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -252,6 +252,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
         const dcFactory: ComponentFactory<DisplayContainerComponent> = this.resolver.resolveComponentFactory(DisplayContainerComponent);
         this.dc = this._viewContainer.createComponent(dcFactory, 0);
+        this.dc.instance.scrollDirection = this.igxForScrollOrientation;
         if (typeof MSGesture === 'function') {
             // On Edge and IE when scrolling on touch the page scroll instead of the grid.
             this.dc.instance._viewContainer.element.nativeElement.style.touchAction = 'none';

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts

@@ -51,6 +51,7 @@ describe('Scroll Inertia Directive ', () => {
 
     // Unit test for wheel - wheelDelataY/wheelDeltaX supported on Chrome, Safari, Opera.
     it('should change scroll top for related scrollbar if onWheel is executed with wheelDeltaY.', () => {
+        fix.componentInstance.scrInertiaDir.IgxScrollInertiaDirection = 'vertical';
         const scrInertiaDir = fix.componentInstance.scrInertiaDir;
         const evt = {wheelDeltaY: -240, preventDefault: () => {}};
         scrInertiaDir.onWheel(evt);
@@ -61,6 +62,7 @@ describe('Scroll Inertia Directive ', () => {
 
     it('should change scroll left for related scrollbar if onWheel is executed with wheelDeltaX.', () => {
         const scrInertiaDir = fix.componentInstance.scrInertiaDir;
+        fix.componentInstance.scrInertiaDir.IgxScrollInertiaDirection = 'horizontal';
         const evt = {wheelDeltaX: -240, preventDefault: () => {}};
         scrInertiaDir.onWheel(evt);
 
@@ -71,6 +73,7 @@ describe('Scroll Inertia Directive ', () => {
     // Unit tests for wheel on other browsers that don't provide wheelDelta - use deltaX and deltaY.
     it('should change scroll top for related scrollbar if onWheel is executed with deltaY.', () => {
         const scrInertiaDir = fix.componentInstance.scrInertiaDir;
+        fix.componentInstance.scrInertiaDir.IgxScrollInertiaDirection = 'vertical';
         const evt = {deltaY: 1, preventDefault: () => {}};
         scrInertiaDir.onWheel(evt);
 
@@ -80,6 +83,7 @@ describe('Scroll Inertia Directive ', () => {
 
     it('should change scroll left for related scrollbar if onWheel is executed with deltaX.', () => {
         const scrInertiaDir = fix.componentInstance.scrInertiaDir;
+        fix.componentInstance.scrInertiaDir.IgxScrollInertiaDirection = 'horizontal';
         const evt = {deltaX: 1, preventDefault: () => {}};
         scrInertiaDir.onWheel(evt);
 

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts

@@ -8,6 +8,9 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
 
     }
 
+    @Input()
+    public IgxScrollInertiaDirection: string;
+
     @Input()
     public IgxScrollInertiaScrollContainer: any;
 
@@ -121,7 +124,7 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
             /* For other browsers that don't provide wheelDelta, use the deltaY to determine direction and pass default values. */
             scrollDeltaY = this.calcAxisCoords(evt.deltaY, -1, 1);
         }
-        if (scrollDeltaX) {
+        if (scrollDeltaX && this.IgxScrollInertiaDirection === 'horizontal') {
             this._scrollToX(
                 this._startX + scrollDeltaX * scrollStep
             );
@@ -131,7 +134,7 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
                 // Prevent navigating through pages when scrolling on Mac
                 evt.preventDefault();
             }
-        } else if (scrollDeltaY) {
+        } else if (scrollDeltaY && this.IgxScrollInertiaDirection === 'vertical') {
             this._scrollToY(
                 this._startY + scrollDeltaY * scrollStep
             );