Merge pull request #8 from Zefling/master

Fix various click problems
plantain-00 · Aug 8, 2017 · b292e45 · b292e45
2 parents 48c96dc + 34e70fe
commit b292e45
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/angular.component.ts b/src/angular.component.ts
@@ -290,13 +290,20 @@ export class Select2 implements ControlValueAccessor {
                 this.toggleOpenAndClose();
             }
             if (!this.ifParentContainsId(e.target as HTMLElement, this._id)) {
-                this.focused = false;
-                window.document.body.removeEventListener("click", this._clickDetectionFc);
-                this._clickDetection = false;
+                this.clickExit();
             }
+        } else if (this.isOpen && !this.ifParentContainsId(e.target as HTMLElement, this._id)) {
+            this.toggleOpenAndClose();
+            this.clickExit();
         }
     }
 
+    clickExit() {
+        this.focused = false;
+        window.document.body.removeEventListener("click", this._clickDetectionFc);
+        this._clickDetection = false;
+    }
+
     ifParentContainsClass(element: HTMLElement, cssClass: string): boolean {
         return this.getParentElementByClass(element, cssClass) !== null;
     }
@@ -463,6 +470,10 @@ export class Select2 implements ControlValueAccessor {
         }
     }
 
+    trackBy(index: number, item: common.Select2Option): any {
+        return item.value;
+    }
+
     searchUpdate(e: Event) {
         this.searchText = (e.target as HTMLInputElement).value;
     }

diff --git a/src/angular.template.html b/src/angular.template.html
@@ -48,13 +48,13 @@
                     role="tree"
                     tabindex="-1"
                     (keydown)="keyDown($event)">
-                     <ng-template ngFor [ngForOf]="filteredData" let-groupOrOption>
+                    <ng-template ngFor [ngForOf]="filteredData" let-groupOrOption [ngForTrackBy]="trackBy">
                         <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"
+                                <li *ngFor="let option of groupOrOption.options; trackBy:trackBy"
                                     [class]="getOptionStyle(option)"
                                     role="treeitem"
                                     [attr.aria-selected]="isSelected(option)"