fix(dropdown): add directive for clicking outside of an element (#2615)

* fix(directive): add directive for clicking outside an element

* fix(selectDropdown): add clickOut directive to Select-dropdown

* fix(datatable): close config when clicked outside

* fix(config): use clickOut directive to close the dropdown

src/app/components_ngrx/planner-list/planner-list.component.html

@@ -66,7 +66,7 @@ <h4>Please wait, we are loading your data.</h4>
       </alm-work-item-quick-add>
     </div>
     <div class="f8-wi-list__settings f8-wi__table-config">
-      <div class="dropdown-kebab-pf pull-right dropdown margin-left-10"
+      <div (clickOut)="clickOut()" class="dropdown-kebab-pf pull-right dropdown margin-left-10"
         dropdown
         [autoClose]="false"
         [isOpen]="isTableConfigOpen"

src/app/components_ngrx/planner-list/planner-list.component.ts

@@ -319,6 +319,11 @@ export class PlannerListComponent implements OnInit, OnDestroy, AfterViewChecked
     this.isTableConfigOpen = false;
   }
 
+  clickOut() {
+    if(this.isTableConfigOpen)
+      this.isTableConfigOpen = false;
+  }
+
   // End:  Setting(tableConfig) Dropdown
 
   togglePanelState(event) {

src/app/components_ngrx/planner-list/planner-list.module.ts

@@ -51,6 +51,7 @@ import { AlmIconModule } from 'ngx-widgets';
 import { EmptyStateModule } from 'patternfly-ng/empty-state';
 import { UrlService } from '../../services/url.service';
 import { InfotipService } from '../../services/infotip.service';
+import { ClickOutModule } from '../../widgets/clickout/clickout.module';
 
 let providers = [];
 
@@ -106,6 +107,7 @@ if (process.env.ENV == 'inmemory') {
     AlmIconModule,
     AssigneesModule,
     CommonModule,
+    ClickOutModule,
     PlannerListRoutingModule,
     PlannerLayoutModule,
     PlannerModalModule,

src/app/widgets/clickout/clickout.directive.ts

@@ -0,0 +1,49 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Inject,
+  Input,
+  Output
+} from '@angular/core';
+
+@Directive({
+  selector: '[clickOut]'
+})
+export class ClickOutDirective {
+
+  @Input('exclude') exclude: string;
+
+  @Output('clickOut') clickOutside: EventEmitter<any> = new EventEmitter();
+
+  @HostListener('document:click', ['$event', '$event.target'])
+  onClick(event: MouseEvent, target: HTMLElement): void {
+    if (!target) {
+      return;
+    }
+
+    const clickedInside = this.element.nativeElement.contains(target);
+
+    if (this.exclude) {
+      this.isExcluded = this.excludeCheck(target);
+    }
+
+    if (!clickedInside && !this.isExcluded) {
+      this.clickOutside.emit(event);
+    }
+  }
+
+  private isExcluded: boolean = false;
+  constructor(private element: ElementRef) {
+  }
+
+  excludeCheck(target: HTMLElement) {
+    const excludeElements = Array.from(document.querySelectorAll(this.exclude)) as Array<HTMLElement>;
+    for (let element of excludeElements) {
+      if(element.contains(target)){
+        return true;
+      }
+    }
+  }
+}

src/app/widgets/clickout/clickout.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from "@angular/core";
+import { ClickOutDirective } from "./clickout.directive";
+
+@NgModule({
+    declarations: [ClickOutDirective],
+    exports: [ClickOutDirective]
+})
+
+export class ClickOutModule {}

src/app/widgets/select-dropdown/select-dropdown.component.html

@@ -1,4 +1,4 @@
-<div class="select-dropdown-container dropdown">
+<div (clickOut)="clickOut()" class="select-dropdown-container dropdown">
   <span (click)="openDropdown()">
     <ng-container *ngTemplateOutlet="toggleButtonRef">
     </ng-container>

src/app/widgets/select-dropdown/select-dropdown.component.ts

@@ -28,23 +28,7 @@ export class SelectDropdownComponent implements OnInit {
   @Output() onOpen: EventEmitter<any> = new EventEmitter();
   @Output() onClose: EventEmitter<any> = new EventEmitter();
 
-  @HostListener('document:click', ['$event', '$event.target']) 
-  onClick(event: MouseEvent, target: HTMLElement) :void {
-    if (this.displayDropdown) {
-      if (!target) {
-        return;
-      }
-
-      const clickedInside = this._el.nativeElement.contains(target);
-
-      if (!clickedInside) {
-        this.closeDropdown();
-      }
-    }
-  }
-
-  constructor(private _el: ElementRef) {
-
+  constructor() {
   }
 
 
@@ -69,4 +53,10 @@ export class SelectDropdownComponent implements OnInit {
   searchItem(text: string) {
     this.onSearch.emit(text);
   }
+
+  clickOut() {
+    if(this.displayDropdown) {
+      this.closeDropdown();
+    }
+  }
 }

src/app/widgets/select-dropdown/select-dropdown.module.ts

@@ -2,10 +2,11 @@ import { NgModule }  from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SelectDropdownComponent } from './select-dropdown.component';
 import { AlmEditableModule } from 'ngx-widgets';
+import { ClickOutModule } from '../clickout/clickout.module';
 
 @NgModule({
   declarations: [ SelectDropdownComponent ],
-  imports: [ CommonModule ],
+  imports: [ CommonModule, ClickOutModule ],
   exports: [ SelectDropdownComponent ]
 })
 export class SelectDropdownModule { }