Merge pull request #5818 from IgniteUI/dpetev/ios-grid-edit-detect

perf(grids): limit cell double tap handler to just iOS #2538

Author: damyanpetev

projects/igniteui-angular/src/lib/core/utils.ts

@@ -226,6 +226,17 @@ export function isFirefox(): boolean {
     return firefoxBrowser;
 }
 
+/**
+ * @hidden
+ * TODO: make injectable, check isPlatformBrowser()
+ */
+export class PlatformUtil {
+    static isIOS(): boolean {
+        const iosBrowser = typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
+        return iosBrowser;
+    }
+}
+
 /**
  * @hidden
  */

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -16,7 +16,9 @@
 } from '@angular/core';
 import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
 import { GridBaseAPIService } from './api.service';
-import { getNodeSizeViaRange, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, SUPPORTED_KEYS, NAVIGATION_KEYS, isIE, isLeftClick } from '../core/utils';
+import {
+    getNodeSizeViaRange, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, SUPPORTED_KEYS, NAVIGATION_KEYS, isIE, isLeftClick, PlatformUtil
+} from '../core/utils';
 import { State } from '../services/index';
 import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
 import { IgxGridSelectionService, ISelectionNode, IgxGridCRUDService } from '../core/grid-selection';
@@ -585,9 +587,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
                 this.nativeElement.addEventListener('compositionend', this.compositionEndHandler);
             }
         });
-        this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, {
-            cssProps: { } /* don't disable user-select, etc */
-        } as HammerOptions);
+        if (PlatformUtil.isIOS()) {
+            this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, {
+                cssProps: { } /* don't disable user-select, etc */
+            } as HammerOptions);
+        }
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts

@@ -7,6 +7,7 @@ import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { HammerGesturesManager } from '../../core/touch';
+import { PlatformUtil } from '../../core/utils';
 
 describe('IgxGrid - Cell component #grid', () => {
     configureTestSuite();
@@ -179,8 +180,16 @@ describe('IgxGrid - Cell component #grid', () => {
         expect(firstCell).toBe(fix.componentInstance.clickedCell);
     });
 
-    it('Should handle doubletap, trigger onDoubleClick event', () => {
+    it('Should not attach doubletap handler for non-iOS', () => {
         const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener');
+        spyOn(PlatformUtil, 'isIOS').and.returnValue(false);
+        const fix = TestBed.createComponent(DefaultGridComponent);
+        fix.detectChanges();
+    });
+
+    it('Should handle doubletap on iOS, trigger onDoubleClick event', () => {
+        const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener');
+        spyOn(PlatformUtil, 'isIOS').and.returnValue(true);
         const fix = TestBed.createComponent(DefaultGridComponent);
         fix.detectChanges();