fix(overlay): change cursor in iOS, #5853

Author: wnvko

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);
             }
         }