Merge pull request #8303 from IgniteUI/mvenkov/close-overlay-on-ios-10.1

Change cursor in iOS - 10.1.x

Author: Lipata

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -188,6 +188,92 @@ describe('igxOverlay', () => {
         UIInteractions.clearOverlay();
     });
 
+    describe('Pure Unit Test', () => {
+        configureTestSuite();
+        let mockElement: any;
+        let mockElementRef: any;
+        let mockFactoryResolver: any;
+        let mockApplicationRef: any;
+        let mockInjector: any;
+        let mockAnimationBuilder: any;
+        let mockDocument: any;
+        let mockNgZone: any;
+        let mockPlatformUtil: any;
+        let overlay: IgxOverlayService;
+        beforeEach(() => {
+            mockElement = {
+                style: { visibility: '', cursor: '', transitionDuration: '' },
+                classList: { add: () => { }, remove: () => { } },
+                appendChild: () => { },
+                removeChild: () => { },
+                addEventListener: (type: string, listener: (this: HTMLElement, ev: MouseEvent) => any) => { },
+                removeEventListener: (type: string, listener: (this: HTMLElement, ev: MouseEvent) => any) => { },
+                getBoundingClientRect: () => ({ width: 10, height: 10 }),
+                insertBefore: (newChild: HTMLDivElement, refChild: Node) => { },
+                contains: () => { }
+            };
+            mockElement.parent = mockElement;
+            mockElement.parentElement = mockElement;
+            mockElementRef = { nativeElement: mockElement };
+            mockFactoryResolver = {
+                resolveComponentFactory: (c: any) => {
+                    return {
+                        create: (i: any) => {
+                            return {
+                                hostView: '',
+                                location: mockElementRef,
+                                changeDetectorRef: { detectChanges: () => { } },
+                                destroy: () => { }
+                            };
+                        }
+                    };
+                }
+            };
+            mockApplicationRef = { attachView: (h: any) => { }, detachView: (h: any) => { } };
+            mockInjector = {};
+            mockAnimationBuilder = {};
+            mockDocument = {
+                body: mockElement,
+                defaultView: mockElement,
+                createElement: () => mockElement,
+                appendChild: () => { },
+                addEventListener: (type: string, listener: (this: HTMLElement, ev: MouseEvent) => any) => { },
+                removeEventListener: (type: string, listener: (this: HTMLElement, ev: MouseEvent) => any) => { }
+            };
+            mockNgZone = {};
+            mockPlatformUtil = { isIOS: false };
+
+            overlay = new IgxOverlayService(
+                mockFactoryResolver, mockApplicationRef, mockInjector, mockAnimationBuilder, mockDocument, mockNgZone, mockPlatformUtil);
+        });
+
+        it('Should set cursor to pointer on iOS', () => {
+            mockPlatformUtil.isIOS = true;
+            mockDocument.body.style.cursor = 'initialCursorValue';
+
+            const mockOverlaySettings: OverlaySettings = {
+                modal: false,
+                positionStrategy: new GlobalPositionStrategy({ openAnimation: null, closeAnimation: null })
+            };
+            let id = overlay.attach(mockElementRef, mockOverlaySettings);
+
+            overlay.show(id);
+            expect(mockDocument.body.style.cursor).toEqual('pointer');
+
+            overlay.hide(id);
+            expect(mockDocument.body.style.cursor).toEqual('initialCursorValue');
+
+            mockPlatformUtil.isIOS = false;
+            id = overlay.attach(mockElementRef, mockOverlaySettings);
+
+            overlay.show(id);
+            expect(mockDocument.body.style.cursor).toEqual('initialCursorValue');
+
+            overlay.hide(id);
+            expect(mockDocument.body.style.cursor).toEqual('initialCursorValue');
+        });
+    });
+
     describe('Unit Tests: ', () => {
         configureTestSuite();
         beforeEach(async(() => {

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -17,6 +17,7 @@ import { fromEvent, Subject, Subscription } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { IAnimationParams } from '../../animations/main';
 import { showMessage } from '../../core/deprecateDecorators';
+import { PlatformUtil } from '../../core/utils';
 import { GlobalPositionStrategy } from './position/global-position-strategy';
 import { NoOpScrollStrategy } from './scroll/NoOpScrollStrategy';
 import {
@@ -41,6 +42,8 @@ export class IgxOverlayService implements OnDestroy {
     private _document: Document;
     private _keyPressEventListener: Subscription;
     private destroy$ = new Subject<boolean>();
+    private _cursorStyleIsSet = false;
+    private _cursorOriginalValue: string;
 
     private _defaultSettings: OverlaySettings = {
         positionStrategy: new GlobalPositionStrategy(),
@@ -116,7 +119,8 @@ export class IgxOverlayService implements OnDestroy {
         private _injector: Injector,
         private builder: AnimationBuilder,
         @Inject(DOCUMENT) private document: any,
-        private _zone: NgZone) {
+        private _zone: NgZone,
+        protected platformUtil: PlatformUtil) {
         this._document = <Document>this.document;
     }
 
@@ -683,6 +687,15 @@ export class IgxOverlayService implements OnDestroy {
                 this._overlayInfos.filter(x => x.settings.closeOnOutsideClick && !x.settings.modal &&
                     x.closeAnimationPlayer &&
                     x.closeAnimationPlayer.hasStarted()).length === 1) {
+
+                // click event is not fired on iOS. To make element "clickable" we are
+                // setting the cursor to pointer
+                if (this.platformUtil.isIOS && !this._cursorStyleIsSet) {
+                    this._cursorOriginalValue = this._document.body.style.cursor;
+                    this._document.body.style.cursor = 'pointer';
+                    this._cursorStyleIsSet = true;
+                }
+
                 this._document.addEventListener('click', this.documentClicked, true);
             }
         }
@@ -698,6 +711,11 @@ export class IgxOverlayService implements OnDestroy {
             });
 
             if (shouldRemoveClickEventListener) {
+                if (this._cursorStyleIsSet) {
+                    this._document.body.style.cursor = this._cursorOriginalValue;
+                    this._cursorOriginalValue = '';
+                    this._cursorStyleIsSet = false;
+                }
                 this._document.removeEventListener('click', this.documentClicked, true);
             }
         }