Make possible to reset the value

plantain-00 · Aug 4, 2017 · e3ace1b · e3ace1b
1 parent b3c6db1
commit e3ace1b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 22 deletions.
diff --git a/demo/angular/main.ts b/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() {
+		let test10 = this.ctrlForm.get('test10');
+		if (test10) {
+			test10.reset();
+		}
+	}
+	change() {
+		let test10 = this.ctrlForm.get('test10');
+		if (test10) {
+			test10.setValue('UT');
+		}
+	}
 }
diff --git a/src/angular-variables.ts b/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-container *ngFor="let groupOrOption of filteredData"><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-container></ul></div></div></div></div>`;
diff --git a/src/angular.component.ts b/src/angular.component.ts
@@ -144,8 +144,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. */
@@ -270,19 +270,23 @@ export class Select2 implements ControlValueAccessor {
             }
             this.open.emit();
         }
+
 
         if (this.isOpen && !this._clickDetection) {
             setTimeout(() => {
                 window.document.body.addEventListener('click', this._clickDetectionFc, false);
                 this._clickDetection = true;
             }, common.timeout);
         }
+
+		this._changeDetectorRef.markForCheck();
     }
 
     clickDetection(e: MouseEvent) {
-        if (!this.ifParentContainsClass(e.target as HTMLElement, 'selection')) {
+
+		if (!this.ifParentContainsClass(e.target as HTMLElement, 'selection')) {
             if (this.isOpen && !this.ifParentContainsClass(e.target as HTMLElement, 'select2-dropdown')) {
-                this.toggleOpenAndClose();
+				this.toggleOpenAndClose();
             }
             if (!this.ifParentContainsId(e.target as HTMLElement, this._id)) {
                 this.focused = false;
@@ -300,7 +304,7 @@ export class Select2 implements ControlValueAccessor {
         return this.getParentElementById(element, id) !== null;
     }
 
-    getParentElementByClass(element: HTMLElement, cssClass: string): HTMLElement {
+    getParentElementByClass(element: HTMLElement, cssClass: string): HTMLElement  | null{
         if (this.containClasses(element, cssClass.trim().split(/\s+/))) {
             return element;
         }
@@ -309,7 +313,7 @@ export class Select2 implements ControlValueAccessor {
             : null;
     }
 
-    getParentElementById(element: HTMLElement, id: string): HTMLElement {
+    getParentElementById(element: HTMLElement, id: string): HTMLElement | null {
         if (element.id == id) {
             return element;
         }
@@ -318,7 +322,7 @@ export class Select2 implements ControlValueAccessor {
             : null;
     }
 
-    ifContaintThisParentElement(element: HTMLElement, parent: HTMLElement): boolean {
+    ifContaintThisParentElement(element: HTMLElement, parent: HTMLElement): boolean | null {
         if (element === parent) {
             return true;
         }
@@ -347,7 +351,7 @@ export class Select2 implements ControlValueAccessor {
     }
 
     focusout() {
-        if (!this.selectionElement.classList.contains('select2-focused')) {
+        if (this.selectionElement && !this.selectionElement.classList.contains('select2-focused')) {
             this.focused = false;
             this._onTouched();
         }
@@ -411,16 +415,20 @@ export class Select2 implements ControlValueAccessor {
             } else {
                 this.option = option;
                 this.isOpen = false;
-                this.selectionElement.focus();
+				if (this.selectionElement) {
+					this.selectionElement.focus();
+				}
             }
-        }
-
-        const value = this.multiple
-            ? (this.option as common.Select2Option[]).map(op => op.value)
-            : (this.option as common.Select2Option).value;
+        } else if (this._control) {
+			this.option = null;
+		}
+
+		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);
@@ -541,13 +549,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.multiple && value && !isArray) {
-            throw "Non array value.";
-        }
-
-        this._changeDetectorRef.markForCheck();
+		if ( this.option || value ) {
+			const isArray = Array.isArray(value);
+			if (this.multiple && value && !isArray) {
+				throw "Non array value.";
+			} else {
+				const option = common.getOptionByValue(this.data, value);
+				this.select(option);
+			}
+
+			this._changeDetectorRef.markForCheck();
+		}
     }
 
     /** Does some manual dirty checking on the native input `value` property. */
Original file line number	Diff line number	Diff line change
		@@ -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"> </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"> </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-container ngFor="let groupOrOption of filteredData"><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-container></ul></div></div></div></div>`;