Little corrections for Angular

demo/angular/index.ts

@@ -6,5 +6,5 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { enableProdMode } from "@angular/core";
 import { MainModule } from "./main.module";
 
-platformBrowserDynamic().bootstrapModule(MainModule);
 enableProdMode();
+platformBrowserDynamic().bootstrapModule(MainModule);

demo/angular/main.ts

@@ -71,6 +71,8 @@ import { data1, data2, data3, data5 } from "../common";
                 placeholder="Select a state"
                 material
                 ></select2>
+            <button (click)="reset()">reset</button>
+            <button (click)="change()">Utah</button>
         </form>
     </div>
     `,
@@ -135,4 +137,17 @@ export class MainComponent {
     update9(value: string[]) {
         this.value9 = value;
     }
+
+    reset() {
+        const test10 = this.ctrlForm.get("test10");
+        if (test10) {
+            test10.reset();
+        }
+    }
+    change() {
+        const test10 = this.ctrlForm.get("test10");
+        if (test10) {
+            test10.setValue("UT");
+        }
+    }
 }

src/angular-variables.ts

@@ -1 +1 @@
-export const angularTemplateHtml = `<div [class]="containerStyle"><div class="selection" #selection [attr.tabindex]="!this.isOpen ? tabIndex : '-1'" (click)="toggleOpenAndClose()" (focus)="focusin()" (blur)="focusout('base')" (keydown)="openKey($event)" [class.select2-focused]="focused"><div [class]="selectionStyle" role="combobox"><span *ngIf="!multiple" class="select2-selection__rendered" [title]="option ? option.label : ''"><span *ngIf="!option">&nbsp;</span><ng-container *ngIf="option">{{option.label}}</ng-container><span [class.select2-selection__placeholder__option]="option" class="select2-selection__placeholder">{{placeholder}}</span></span><span *ngIf="!multiple" class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span><ul *ngIf="multiple" class="select2-selection__rendered"><span [class.select2-selection__placeholder__option]="option?.length > 0" class="select2-selection__placeholder">{{placeholder}}</span><li *ngFor="let op of option" class="select2-selection__choice" [title]="op.label"><span (click)="removeSelection($event, op)" class="select2-selection__choice__remove" role="presentation">×</span>{{op.label}}</li></ul></div><div class="select2-subscript-wrapper"><ng-content select="select2-hint"></ng-content></div></div><div [class]="dropdownStyle"><div class="select2-dropdown select2-dropdown--below"><div [class]="searchStyle"><input #searchInput [id]="id + '-search-field'" [(value)]="searchText" (keydown)="keyDown($event)" (keyup)="searchUpdate($event)" (focusout)="focusout('searchInput')" (focus)="focuskeeper()" class="select2-search__field" type="search" role="textbox" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" [attr.tabindex]="this.isOpen ? tabIndex : '-1'"></div><div class="select2-results"><ul #results class="select2-results__options" role="tree" tabindex="-1" (keydown)="keyDown($event)" (focusout)="focusout('option')"><ng-template ngFor [ngForOf]="filteredData" let-groupOrOption><li *ngIf="groupOrOption.options" class="select2-results__option" role="group"><strong [attr.class]="'select2-results__group' + (groupOrOption.classes ? ' ' + groupOrOption.classes : '')">{{groupOrOption.label}}</strong><ul class="select2-results__options select2-results__options--nested"><li *ngFor="let option of groupOrOption.options" [class]="getOptionStyle(option)" role="treeitem" [attr.aria-selected]="isSelected(option)" [attr.aria-disabled]="isDisabled(option)" (mouseenter)="mouseenter(option)" (click)="click(option)">{{option.label}}</li></ul></li><li *ngIf="!groupOrOption.options" [class]="getOptionStyle(groupOrOption)" role="treeitem" [attr.aria-selected]="isSelected(groupOrOption)" [attr.aria-disabled]="isDisabled(groupOrOption)" (mouseenter)="mouseenter(groupOrOption)" (click)="click(groupOrOption)">{{groupOrOption.label}}</li></ng-template></ul></div></div></div></div>`;
+export const angularTemplateHtml = `<div [class]="containerStyle"><div class="selection" #selection [attr.tabindex]="!this.isOpen ? tabIndex : '-1'" (click)="toggleOpenAndClose()" (focus)="focusin()" (blur)="focusout()" (keydown)="openKey($event)" [class.select2-focused]="focused"><div [class]="selectionStyle" role="combobox"><span *ngIf="!multiple" class="select2-selection__rendered" [title]="option ? option.label : ''"><span *ngIf="!option">&nbsp;</span><ng-container *ngIf="option">{{option.label}}</ng-container><span [class.select2-selection__placeholder__option]="option" class="select2-selection__placeholder">{{placeholder}}</span></span><span *ngIf="!multiple" class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span><ul *ngIf="multiple" class="select2-selection__rendered"><span [class.select2-selection__placeholder__option]="option?.length > 0" class="select2-selection__placeholder">{{placeholder}}</span><li *ngFor="let op of option" class="select2-selection__choice" [title]="op.label"><span (click)="removeSelection($event, op)" class="select2-selection__choice__remove" role="presentation">×</span>{{op.label}}</li></ul></div><div class="select2-subscript-wrapper"><ng-content select="select2-hint"></ng-content></div></div><div [class]="dropdownStyle"><div class="select2-dropdown select2-dropdown--below"><div [class]="searchStyle"><input #searchInput [id]="id + '-search-field'" [(value)]="searchText" (keydown)="keyDown($event)" (keyup)="searchUpdate($event)" class="select2-search__field" type="search" role="textbox" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" [attr.tabindex]="this.isOpen ? tabIndex : '-1'"></div><div class="select2-results"><ul #results class="select2-results__options" role="tree" tabindex="-1" (keydown)="keyDown($event)"><ng-template ngFor [ngForOf]="filteredData" let-groupOrOption><li *ngIf="groupOrOption.options" class="select2-results__option" role="group"><strong [attr.class]="'select2-results__group' + (groupOrOption.classes ? ' ' + groupOrOption.classes : '')">{{groupOrOption.label}}</strong><ul class="select2-results__options select2-results__options--nested"><li *ngFor="let option of groupOrOption.options" [class]="getOptionStyle(option)" role="treeitem" [attr.aria-selected]="isSelected(option)" [attr.aria-disabled]="isDisabled(option)" (mouseenter)="mouseenter(option)" (click)="click(option)">{{option.label}}</li></ul></li><li *ngIf="!groupOrOption.options" [class]="getOptionStyle(groupOrOption)" role="treeitem" [attr.aria-selected]="isSelected(groupOrOption)" [attr.aria-disabled]="isDisabled(groupOrOption)" (mouseenter)="mouseenter(groupOrOption)" (click)="click(groupOrOption)">{{groupOrOption.label}}</li></ng-template></ul></div></div></div></div>`;

src/angular.component.ts

@@ -149,8 +149,8 @@ export class Select2 implements ControlValueAccessor {
     @Input()
     get value() { return this._value; }
     set value(value: common.Select2UpdateValue) {
-        this.writeValue(value);
         this._value = value;
+        this.writeValue(value);
     }
 
     /** Tab index for the select2 element. */
@@ -170,7 +170,8 @@ export class Select2 implements ControlValueAccessor {
     private _disabled = false;
     private _required = false;
     private _readonly = false;
-    private _keeper = false;
+    private _clickDetection = false;
+    private _clickDetectionFc: (e: MouseEvent) => void;
     private _id: string;
     private _uid: string = `select2-${nextUniqueId++}`;
     private _value: common.Select2UpdateValue;
@@ -189,6 +190,8 @@ export class Select2 implements ControlValueAccessor {
         if (this._control) {
             this._control.valueAccessor = this;
         }
+
+        this._clickDetectionFc = this.clickDetection.bind(this);
     }
 
     ngOnInit() {
@@ -219,6 +222,10 @@ export class Select2 implements ControlValueAccessor {
         this._dirtyCheckNativeValue();
     }
 
+    ngOnDestroy() {
+        window.document.body.removeEventListener("click", this._clickDetectionFc);
+    }
+
     getOptionStyle(option: common.Select2Option) {
         return common.getOptionStyle(option.value, this.hoveringValue)
             + (option.classes ? " " + option.classes : "");
@@ -231,7 +238,6 @@ export class Select2 implements ControlValueAccessor {
     }
 
     click(option: common.Select2Option) {
-        this._keeper = false;
         if (!option.disabled) {
             this.select(option);
         }
@@ -271,42 +277,89 @@ export class Select2 implements ControlValueAccessor {
             }
             this.open.emit();
         }
-        if (this.focusoutTimer) {
-            clearTimeout(this.focusoutTimer);
+
+        if (this.isOpen && !this._clickDetection) {
+            setTimeout(() => {
+                window.document.body.addEventListener("click", this._clickDetectionFc, false);
+                this._clickDetection = true;
+            }, common.timeout);
         }
+
+        this._changeDetectorRef.markForCheck();
     }
 
-    focusin() {
-        this.focuskeeper();
-        if (!this.disabled) {
-            this.focused = true;
+    clickDetection(e: MouseEvent) {
+        if (!this.ifParentContainsClass(e.target as HTMLElement, "selection")) {
+            if (this.isOpen && !this.ifParentContainsClass(e.target as HTMLElement, "select2-dropdown")) {
+                this.toggleOpenAndClose();
+            }
+            if (!this.ifParentContainsId(e.target as HTMLElement, this._id)) {
+                this.focused = false;
+                window.document.body.removeEventListener("click", this._clickDetectionFc);
+                this._clickDetection = false;
+            }
         }
     }
 
-    focuskeeper() {
-        this._keeper = true;
-        setTimeout(() => {
-            this._keeper = false;
-        }, common.timeout);
+    ifParentContainsClass(element: HTMLElement, cssClass: string): boolean {
+        return this.getParentElementByClass(element, cssClass) !== null;
     }
 
-    focusout(field: string) {
-        this.focusoutTimer = setTimeout(() => {
-            if (
-                (this.focused && !this.isOpen && this._keeper === false)
-                || (field === "searchInput" && this._keeper === false)
-                || (field === "option" && this._keeper === false)
-            ) {
-                this.isOpen = false;
-                this.focusoutTimer = undefined;
-                if (!this.selectionElement.classList.contains("select2-focus")) {
-                    this.focused = false;
-                    this._onTouched();
-                    this._changeDetectorRef.markForCheck();
-                }
+    ifParentContainsId(element: HTMLElement, id: string): boolean {
+        return this.getParentElementById(element, id) !== null;
+    }
+
+    getParentElementByClass(element: HTMLElement, cssClass: string): HTMLElement | null {
+        if (this.containClasses(element, cssClass.trim().split(/\s+/))) {
+            return element;
+        }
+        return element.parentElement
+            ? this.getParentElementByClass(element.parentElement, cssClass)
+            : null;
+    }
+
+    getParentElementById(element: HTMLElement, id: string): HTMLElement | null {
+        if (element.id === id) {
+            return element;
+        }
+        return element.parentElement
+            ? this.getParentElementById(element.parentElement, id)
+            : null;
+    }
+
+    ifContaintThisParentElement(element: HTMLElement, parent: HTMLElement): boolean | null {
+        if (element === parent) {
+            return true;
+        }
+        return element.parentElement
+            ? this.ifContaintThisParentElement(element.parentElement, parent)
+            : null;
+    }
+
+    containClasses(element: HTMLElement, cssClasses: string[]): boolean {
+        if (!element.classList) {
+            return false;
+        }
+        for (const cssClass of cssClasses) {
+            if (!element.classList.contains(cssClass)) {
+                return false;
             }
-            this._keeper = false;
-        }, common.timeout);
+        }
+        return true;
+    }
+
+    focusin() {
+        if (this.disabled) {
+            return;
+        }
+        this.focused = true;
+    }
+
+    focusout() {
+        if (this.selectionElement && !this.selectionElement.classList.contains("select2-focused")) {
+            this.focused = false;
+            this._onTouched();
+        }
     }
 
     moveUp() {
@@ -367,17 +420,21 @@ export class Select2 implements ControlValueAccessor {
             } else {
                 this.option = option;
                 this.isOpen = false;
-                this.selectionElement.focus();
-                this.focuskeeper();
+                if (this.selectionElement) {
+                    this.selectionElement.focus();
+                }
             }
+        } else if (this._control) {
+            this.option = null;
         }
 
-        const value = this.multiple
-            ? (this.option as common.Select2Option[]).map(op => op.value)
-            : (this.option as common.Select2Option).value;
+        const value = this.option ? (this.multiple
+                ? (this.option as common.Select2Option[]).map(op => op.value)
+                : (this.option as common.Select2Option).value
+            ) : undefined;
 
         if (this._control) {
-            this._control.reset(value);
+
             this._onChange(value);
         }
         this.update.emit(value);
@@ -498,13 +555,17 @@ export class Select2 implements ControlValueAccessor {
      * found with the designated value, the select trigger is cleared.
      */
     private _setSelectionByValue(value: any | any[]): void {
-        const isArray = Array.isArray(value);
+        if ( this.option || value ) {
+            const isArray = Array.isArray(value);
+            if (this.multiple && value && !isArray) {
+                throw new Error("Non array value.");
+            } else {
+                const option = common.getOptionByValue(this.data, value);
+                this.select(option);
+            }
 
-        if (this.multiple && value && !isArray) {
-            throw new Error("Non array value.");
+            this._changeDetectorRef.markForCheck();
         }
-
-        this._changeDetectorRef.markForCheck();
     }
 
     /** Does some manual dirty checking on the native input `value` property. */

src/angular.template.html

@@ -3,7 +3,7 @@
          [attr.tabindex]="!this.isOpen ? tabIndex : '-1'"
          (click)="toggleOpenAndClose()"
          (focus)="focusin()"
-         (blur)="focusout('base')"
+         (blur)="focusout()"
          (keydown)="openKey($event)"
          [class.select2-focused]="focused">
          <div [class]="selectionStyle" role="combobox">
@@ -34,8 +34,6 @@
                     [(value)]="searchText"
                     (keydown)="keyDown($event)"
                     (keyup)="searchUpdate($event)"
-                    (focusout)="focusout('searchInput')"
-                    (focus)="focuskeeper()"
                     class="select2-search__field"
                     type="search"
                     role="textbox"
@@ -49,10 +47,9 @@
                 <ul #results class="select2-results__options"
                     role="tree"
                     tabindex="-1"
-                    (keydown)="keyDown($event)"
-                    (focusout)="focusout('option')">
-                    <ng-template ngFor [ngForOf]="filteredData" let-groupOrOption>
-                                 <li *ngIf="groupOrOption.options"
+                    (keydown)="keyDown($event)">
+                     <ng-template ngFor [ngForOf]="filteredData" let-groupOrOption>
+                        <li *ngIf="groupOrOption.options"
                             class="select2-results__option"
                             role="group">
                             <strong [attr.class]="'select2-results__group' + (groupOrOption.classes ? ' ' + groupOrOption.classes : '')">{{groupOrOption.label}}</strong>