Merge pull request #5505 from IgniteUI/mvenkov/fix-svg-use-tags

Add pointerEvents: none to use tag of icon's svg

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss

@@ -61,6 +61,10 @@
             width: inherit;
             height: inherit;
             fill: currentColor;
+
+            use {
+                pointer-events: none;
+            }
         }
     }
 

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

@@ -620,15 +620,14 @@ export class IgxOverlayService implements OnDestroy {
                 return;
             }
             if (info.settings.closeOnOutsideClick) {
+                const target = ev.target as any;
                 //  if the click is on the element do not close this overlay
-                if (!info.elementRef.nativeElement.contains(ev.target)) {
+                if (!info.elementRef.nativeElement.contains(target)) {
                     // if we should exclude position target check if the click is over it. If so do not close overlay
                     const positionTarget = info.settings.positionStrategy.settings.target as HTMLElement;
                     let clickOnPositionTarget = false;
                     if (positionTarget) {
-                        const positionTargetRect = positionTarget.getBoundingClientRect();
-                        clickOnPositionTarget = ev.clientX >= positionTargetRect.left && ev.clientX <= positionTargetRect.right &&
-                                                ev.clientY >= positionTargetRect.top && ev.clientY <= positionTargetRect.bottom;
+                        clickOnPositionTarget = positionTarget.contains(target);
                     }
 
                     if (!(info.settings.excludePositionTarget && clickOnPositionTarget)) {