fix: Fire close event only dropdown was opened

ng-select · Sep 24, 2017 · e4084ea · e4084ea
1 parent 794ee36
commit e4084ea
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 8 deletions.
diff --git a/src/lib/src/ng-select.component.spec.ts b/src/lib/src/ng-select.component.spec.ts
@@ -524,6 +524,81 @@ describe('NgSelectComponent', function () {
             }));
         });
     });
+
+    describe('Output events', () => {
+        it('fire open event once', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectEventsTestCmp,
+                `<ng-select [items]="cities"
+                            (open)="onOpen()"
+                            [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            spyOn(fixture.componentInstance, 'onOpen');
+
+            fixture.componentInstance.select.open();
+            fixture.componentInstance.select.open();
+            tick();
+
+            expect(fixture.componentInstance.onOpen).toHaveBeenCalledTimes(1);
+        }));
+
+        it('fire close event once', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectEventsTestCmp,
+                `<ng-select [items]="cities"
+                            (close)="onClose()"
+                            [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            spyOn(fixture.componentInstance, 'onClose');
+
+            fixture.componentInstance.select.open();
+            fixture.componentInstance.select.close();
+            fixture.componentInstance.select.close();
+            tick();
+
+            expect(fixture.componentInstance.onClose).toHaveBeenCalledTimes(1);
+        }));
+
+        it('fire change when changed', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectEventsTestCmp,
+                `<ng-select [items]="cities"
+                            (change)="onChange()"
+                            [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            spyOn(fixture.componentInstance, 'onChange');
+
+            fixture.componentInstance.selectedCity = fixture.componentInstance.cities[0];
+            fixture.detectChanges();
+            tick();
+
+            fixture.componentInstance.select.select(fixture.componentInstance.cities[1]);
+
+            expect(fixture.componentInstance.onChange).toHaveBeenCalledTimes(1);
+        }));
+
+        it('do not fire change when item not changed', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectEventsTestCmp,
+                `<ng-select [items]="cities"
+                            (change)="onChange()"
+                            [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            spyOn(fixture.componentInstance, 'onChange');
+
+            fixture.componentInstance.selectedCity = fixture.componentInstance.cities[0];
+            fixture.detectChanges();
+            tick();
+
+            fixture.componentInstance.select.select(fixture.componentInstance.cities[0]);
+
+            expect(fixture.componentInstance.onChange).toHaveBeenCalledTimes(0);
+        }));
+    });
 });
 
 function selectOption(fixture, key: KeyCode, steps: number) {
@@ -559,7 +634,8 @@ function createTestingModule<T>(cmp: Type<T>, template: string): ComponentFixtur
             NgSelectSelectedObjectByRefCmp,
             NgSelectSelectedSimpleMultipleCmp,
             NgSelectSelectedObjectMultipleCmp,
-            NgSelectSelectedEmptyCmp
+            NgSelectSelectedEmptyCmp,
+            NgSelectEventsTestCmp
         ]
     })
         .overrideComponent(cmp, {
@@ -704,3 +780,31 @@ class NgSelectFilterTestCmp {
 
     customFilter = new Subject<string>();
 }
+
+@Component({
+    template: ``
+})
+class NgSelectEventsTestCmp {
+    @ViewChild(NgSelectComponent) select: NgSelectComponent;
+    selectedCity: { id: number; name: string };
+    cities = [
+        { id: 1, name: 'Vilnius' },
+        { id: 2, name: 'Kaunas' },
+        { id: 3, name: 'Pabrade' },
+    ];
+
+    onChange($event) {
+    }
+
+    onFocus($event: Event) {
+    }
+
+    onBlur($event: Event) {
+    }
+
+    onOpen() {
+    }
+
+    onClose() {
+    }
+}
diff --git a/src/lib/src/ng-select.component.ts b/src/lib/src/ng-select.component.ts
@@ -218,6 +218,16 @@ export class NgSelectComponent implements OnInit, ControlValueAccessor {
         this.onOpen.emit();
     }
 
+    close() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+        this.clearSearch();
+        this.itemsList.unmarkCurrentItem();
+        this.onClose.emit();
+    }
+
     getLabelValue(value: NgOption) {
         return value ? value[this.bindLabel] : '';
     }
@@ -352,13 +362,6 @@ export class NgSelectComponent implements OnInit, ControlValueAccessor {
         this.itemsList.clearFilter();
     }
 
-    private close() {
-        this.isOpen = false;
-        this.clearSearch();
-        this.itemsList.unmarkCurrentItem();
-        this.onClose.emit();
-    }
-
     private focusSearchInput() {
         setTimeout(() => {
             this.filterInput.nativeElement.focus();