update the runOutside for clicking event to minimize detection and prevent performance issues

README.md

@@ -1,3 +1,5 @@
+# This is a fork of @kolkov/angular-editor created by @kolkov.
+
 <p align="center">
   <img width="150px" src="https://raw.githubusercontent.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true" alt="AngularEditor logo"/>
 </p>

package.json

@@ -1,6 +1,8 @@
 {
-  "name": "@kolkov/angular-editor",
-  "version": "3.0.0-beta.0",
+  "name": "@linhle/angular-editor-fork",
+  "version": "1.0.0",
+  "description": "A fork of original-library with modifications",
+  "author": "Original author @kolkov",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/angular-editor/src/lib/ae-select/ae-select.component.ts

@@ -6,6 +6,7 @@ import {
   forwardRef, HostBinding,
   HostListener,
   Input,
+  NgZone,
   OnInit,
   Output,
   Renderer2,
@@ -41,6 +42,7 @@ export class AeSelectComponent implements OnInit, ControlValueAccessor {
   selectedOption: SelectOption;
   disabled = false;
   optionId = 0;
+  private outsideClickListener: () => void;
 
   get label(): string {
     return this.selectedOption && this.selectedOption.hasOwnProperty('label') ? this.selectedOption.label : 'Select';
@@ -61,7 +63,13 @@ export class AeSelectComponent implements OnInit, ControlValueAccessor {
 
   constructor(private elRef: ElementRef,
               private r: Renderer2,
-  ) {}
+              private ngZone: NgZone
+  ) {
+    this.ngZone.runOutsideAngular(() => {
+      this.outsideClickListener = this.handleOutsideClick.bind(this);
+      document.addEventListener('click', this.outsideClickListener);
+    });
+  }
 
   ngOnInit() {
     this.selectedOption = this.options[0];
@@ -70,6 +78,11 @@ export class AeSelectComponent implements OnInit, ControlValueAccessor {
     }
   }
 
+  ngOnDestroy() {
+    // Clean up the event listener
+    document.removeEventListener('click', this.outsideClickListener);
+  }
+
   hide() {
     this.hidden = 'none';
   }
@@ -91,10 +104,14 @@ export class AeSelectComponent implements OnInit, ControlValueAccessor {
     this.opened = !this.opened;
   }
 
-  @HostListener('document:click', ['$event'])
-  onClick($event: MouseEvent) {
-    if (!this.elRef.nativeElement.contains($event.target)) {
-      this.close();
+  handleOutsideClick(event: MouseEvent) {
+    if (!this.opened)
+      return; 
+
+    if (!this.elRef.nativeElement.contains(event.target)) {
+      this.ngZone.run(() => {
+        this.close();
+      });
     }
   }