fix bug of popup do not close when clicking outside for ChangeDetecti…

…onStrategy.OnPush

demo/angular/index.html

@@ -3,4 +3,4 @@
 <link rel="stylesheet" href="../index.bundle-bf3a9ac354f50f05d52e53a111806c2a.css" crossOrigin="anonymous" integrity="sha256-FkSI4EGymi3Kmxa3MJc/bdoGRpQikI8ww27pLimkIc0=" />
 <a class="github-fork-ribbon right-bottom" href="https://github.com/plantain-00/select2-component" title="Fork me on GitHub" target="_blank">Fork me on GitHub</a>
 <app></app>
-<script src="./index.bundle-94ff5e698125066056770e2aaa1461f5.js" crossOrigin="anonymous" integrity="sha256-Zkgwug/d+5mDx8GR+l4F0Q/HOocryooEBmW5dc5f80I="></script>
+<script src="./index.bundle-b2f30b598bbfb68653d656611d74be26.js" crossOrigin="anonymous" integrity="sha256-NL6+owzxwkwNyS+lYuv+rsjyCQmD0lof25ihjzT8b7E="></script>

demo/angular/index.ts

@@ -3,7 +3,7 @@ import "core-js/es7/reflect";
 import "zone.js/dist/zone";
 
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
-import { enableProdMode } from "@angular/core";
+import { enableProdMode, ChangeDetectionStrategy } from "@angular/core";
 
 enableProdMode();
 
@@ -13,6 +13,7 @@ import { data1, data2, data3, data5 } from "../common";
 
 @Component({
     selector: "app",
+    changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
     <div style="width: 500px;">
         <a href="https://github.com/plantain-00/select2-component/tree/master/demo/angular/index.ts" target="_blank">the source code of the demo</a>

demo/file-size.json

@@ -3,7 +3,7 @@
   "reactIndexBundleJs": "164 kB 48.5 kB",
   "vueIndexBundleJs": "102 kB 34.4 kB",
   "indexBundleCss": "10.4 kB 1.93 kB",
-  "demoAngularIndexHtml": "550 B 403 B",
+  "demoAngularIndexHtml": "550 B 401 B",
   "demoReactIndexHtml": "565 B 409 B",
   "demoVueIndexHtml": "565 B 410 B"
 }

demo/tsconfig.json

@@ -11,6 +11,7 @@
         "importHelpers": true,
         "jsx": "react",
         "experimentalDecorators": true,
-        "allowSyntheticDefaultImports": true
+        "allowSyntheticDefaultImports": true,
+        "emitDecoratorMetadata": true
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "select2-component",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A vuejs, reactjs and angular select component.",
   "main": "index.js",
   "scripts": {

src/angular.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from "@angular/core";
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, ChangeDetectorRef } from "@angular/core";
 import * as common from "./common";
 export * from "./common";
 import { angularTemplateHtml } from "./angular-variables";
@@ -46,6 +46,8 @@ export class Select2Component {
     @ViewChild("results")
     results: ElementRef;
 
+    constructor(private cdr: ChangeDetectorRef) { }
+
     get searchText() {
         return this.innerSearchText;
     }
@@ -155,6 +157,7 @@ export class Select2Component {
         this.focusoutTimer = setTimeout(() => {
             this.isOpen = false;
             this.focusoutTimer = undefined;
+            this.cdr.markForCheck();
         }, common.timeout);
     }
     moveUp() {

src/tsconfig.json

@@ -13,6 +13,7 @@
         "importHelpers": true,
         "jsx": "react",
         "experimentalDecorators": true,
-        "allowSyntheticDefaultImports": true
+        "allowSyntheticDefaultImports": true,
+        "emitDecoratorMetadata": true
     }
 }