feat: toggle dropdown when searchable is false. (#137)

Author: aitboudad

src/ng-select/ng-select.component.html

@@ -1,4 +1,4 @@
-<div (click)="open()" class="ng-control">
+<div (click)="searchable ? open() : toggle()" class="ng-control">
     <div class="ng-value-container">
         <div class="ng-placeholder" [hidden]="!showPlaceholder()">{{placeholder}}</div>
         <ng-template #defaultLabelTemplate let-item="item">
@@ -40,7 +40,7 @@
 
 <div class="ng-menu-outer">
     <virtual-scroll role="listbox" class="ng-menu" [disabled]="disableVirtualScroll" [bufferAmount]="4" [items]="itemsList.filteredItems" (update)="viewPortItems = $event">
-        <div class="ng-option" role="option" (click)="toggle(item)" (mousedown)="$event.preventDefault()" (mouseover)="onItemHover(item)"
+        <div class="ng-option" role="option" (click)="toggleItem(item)" (mousedown)="$event.preventDefault()" (mouseover)="onItemHover(item)"
              *ngFor="let item of viewPortItems"
              [class.disabled]="item.disabled"
              [class.selected]="item.selected"

src/ng-select/ng-select.component.spec.ts

@@ -697,6 +697,27 @@ describe('NgSelectComponent', function () {
             expect(fixture.componentInstance.select.itemsList.filteredItems).toEqual(result);
         }));
 
+        it('should toggle dropdown when searchable false', fakeAsync(() => {
+            fixture = createTestingModule(
+                NgSelectFilterTestCmp,
+                `<ng-select [items]="cities"
+                    bindLabel="name"
+                    [searchable]="false"
+                    [(ngModel)]="selectedCity">
+                </ng-select>`);
+            
+            const selectInput = fixture.debugElement.query(By.css('.ng-control'));
+            // open
+            selectInput.triggerEventHandler('click', { stopPropagation: () => { } });
+            tickAndDetectChanges(fixture);
+            expect(fixture.componentInstance.select.isOpen).toBe(true);
+
+            // close
+            selectInput.triggerEventHandler('click', { stopPropagation: () => { } });
+            tickAndDetectChanges(fixture);
+            expect(fixture.componentInstance.select.isOpen).toBe(false);
+        }));
+
         it('should not filter when searchable false', fakeAsync(() => {
             fixture = createTestingModule(
                 NgSelectFilterTestCmp,

src/ng-select/ng-select.component.ts

@@ -231,6 +231,14 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         this.isDisabled = isDisabled;
     }
 
+    toggle() {
+        if (!this.isOpen) {
+            this.open();
+        } else {
+            this.close();
+        }
+    }
+
     open() {
         if (this.isDisabled || this.isOpen) {
             return;
@@ -251,7 +259,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         this.closeEvent.emit();
     }
 
-    toggle(item: NgOption) {
+    toggleItem(item: NgOption) {
         if (!item || item.disabled || this.isDisabled) {
             return;
         }
@@ -494,7 +502,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     private handleEnter($event: KeyboardEvent) {
         if (this.isOpen) {
             if (this.itemsList.markedItem) {
-                this.toggle(this.itemsList.markedItem);
+                this.toggleItem(this.itemsList.markedItem);
             } else if (this.addTag) {
                 this.selectTag();
             }