chore(overlay): Address comments #8148

Author: IvayloG

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -185,13 +185,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _remoteSelection = {};
     private _onChangeCallback: (_: any) => void = noop;
     private _onTouchedCallback: () => void = noop;
-    private _overlaySettings: OverlaySettings = {
-        scrollStrategy: new AbsoluteScrollStrategy(),
-        positionStrategy: new AutoPositionStrategy(),
-        modal: false,
-        closeOnOutsideClick: true,
-        excludeFromOutsideClick: [this.elementRef.nativeElement as HTMLElement]
-    };
+    private _overlaySettings: OverlaySettings;
     private _value = '';
     private _valid = IgxComboState.INITIAL;
     constructor(
@@ -1228,7 +1222,15 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public ngOnInit() {
         this.ngControl = this._injector.get<NgControl>(NgControl, null);
-        this._overlaySettings.target = this.elementRef.nativeElement;
+        const targetElement = this.elementRef.nativeElement;
+        this._overlaySettings = {
+            target: targetElement,
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            positionStrategy: new AutoPositionStrategy(),
+            modal: false,
+            closeOnOutsideClick: true,
+            excludeFromOutsideClick: [targetElement as HTMLElement]
+        };
         this.selection.set(this.id, new Set());
         this._iconService.addSvgIconFromText(caseSensitiveIcon.name, caseSensitiveIcon.value, 'case-sensitive');
     }

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -12,7 +12,8 @@ import {
     Optional,
     Output,
     Self,
-    AfterViewInit
+    AfterViewInit,
+    OnInit
 } from '@angular/core';
 import { NgModel, FormControlName } from '@angular/forms';
 import { CommonModule } from '@angular/common';
@@ -75,7 +76,7 @@ export interface AutocompleteOverlaySettings {
 @Directive({
     selector: '[igxAutocomplete]'
 })
-export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective implements OnDestroy, AfterViewInit {
+export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective implements OnDestroy, AfterViewInit, OnInit {
 
     private _shouldBeOpen = false;
     constructor(@Self() @Optional() @Inject(NgModel) protected ngModel: NgModel,
@@ -87,13 +88,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     }
     private destroy$ = new Subject();
 
-    private defaultSettings: OverlaySettings = {
-        target: this.parentElement,
-        modal: false,
-        scrollStrategy: new AbsoluteScrollStrategy(),
-        positionStrategy: new AutoPositionStrategy(),
-        excludeFromOutsideClick: [this.parentElement]
-    };
+    private defaultSettings: OverlaySettings;
 
     protected id: string;
     protected get model() {
@@ -348,6 +343,18 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         this.cdr.detectChanges();
     }
 
+    /** @hidden @internal */
+    public ngOnInit() {
+        const targetElement = this.parentElement;
+        this.defaultSettings = {
+            target: targetElement,
+            modal: false,
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            positionStrategy: new AutoPositionStrategy(),
+            excludeFromOutsideClick: [targetElement]
+        };
+    }
+
     /** @hidden */
     public ngOnDestroy() {
         this.destroy$.next();

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -434,13 +434,14 @@ export class IgxToggleActionDirective implements OnInit {
      * @hidden
      */
     public ngOnInit() {
+        const targetElement = this.element.nativeElement;
         this._overlayDefaults = {
-            target: this.element.nativeElement,
+            target: targetElement,
             positionStrategy: new ConnectedPositioningStrategy(),
             scrollStrategy: new AbsoluteScrollStrategy(),
             closeOnOutsideClick: true,
             modal: false,
-            excludeFromOutsideClick: [this.element.nativeElement as HTMLElement]
+            excludeFromOutsideClick: [targetElement as HTMLElement]
         };
     }
 

projects/igniteui-angular/src/lib/select/select.component.ts

@@ -492,9 +492,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
         const args: CancelableEventArgs = { cancel: event.cancel };
         this.onClosing.emit(args);
         event.cancel = args.cancel;
-        if (args.cancel) {
-            return;
-        }
     }
 
     /** @hidden @internal */

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

@@ -651,20 +651,16 @@ export class IgxOverlayService implements OnDestroy {
             }
             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(target)) {
-                    // if we should exclude position target check if the click is over it. If so do not close overlay
-                    const excludeElements = info.settings.excludeFromOutsideClick ? [...info.settings.excludeFromOutsideClick] : [];
-                    const isInsideClick: boolean = excludeElements.some(e => e.contains(target as Node));
-                    if (!isInsideClick) {
-                        //  if the click is outside click, but close animation has started do nothing
-                        if (!(info.closeAnimationPlayer && info.closeAnimationPlayer.hasStarted())) {
-                            this._hide(info.id, ev);
-                        }
-                    }
-                } else {
-                    //  TODO: should we return here, or continue with next overlays
+                const overlayElement = info.elementRef.nativeElement;
+                // check if the click is on the overlay element or on an element from the exclusion list, and if so do not close the overlay
+                const excludeElements = info.settings.excludeFromOutsideClick ?
+                    [...info.settings.excludeFromOutsideClick, overlayElement] : [overlayElement];
+                const isInsideClick: boolean = excludeElements.some(e => e.contains(target as Node));
+                if (isInsideClick) {
                     return;
+                //  if the click is outside click, but close animation has started do nothing
+                } else if (!(info.closeAnimationPlayer && info.closeAnimationPlayer.hasStarted())) {
+                    this._hide(info.id, ev);
                 }
             }
         }