feat(isOpen): allow to control whether dropdown should open or close

closes #
ng-select · Jun 15, 2018 · ab6c388 · ab6c388
1 parent 22eb640
commit ab6c388
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -131,7 +131,8 @@ map: {
 | [loading] | `boolean` |  `-` | no | You can set the loading state from the outside (e.g. async items loading) |
 | loadingText | `string` | `Loading...` | no | Set custom text when for loading items |
 | labelForId | `string` | `-` | no | Id to associate control with label. |
-| [markFirst] | `boolean` | `true` | no | Marks first item as focused when opening/filtering. Default `true`|
+| [markFirst] | `boolean` | `true` | no | Marks first item as focused when opening/filtering. |
+| [isOpen] | `boolean` | `-` | no | Allows to control whether dropdown should open or close. `True` - won't close. `False` - won't open. |
 | maxSelectedItems | `number` | none | no | When multiple = true, allows to set a limit number of selection. |
 | [hideSelected] | `boolean` | `false` | no | Allows to hide selected items. |
 | [multiple] | `boolean` | `false` | no | Allows to select multiple items. |

diff --git a/demo/app/examples/tags.component.ts b/demo/app/examples/tags.component.ts
@@ -43,6 +43,16 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
                 [(ngModel)]="selectedCompanyCustomPromise">
         </ng-select>
         ---
+
+        <hr>
+        <label>Tagging without dropdown. Press enter to add item</label>
+        ---html,true
+        <ng-select [items]="[]"
+                   [addTag]="true"
+                   [multiple]="true"
+                   [isOpen]="false">
+        </ng-select>
+        ---
     `
 })
 export class SelectTagsComponent {

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -926,7 +926,23 @@ describe('NgSelectComponent', function () {
             fixture.whenStable().then(() => {
                 expect(fixture.componentInstance.select.opened).toBeFalsy();
             })
+        }));
+
+        it('should not close when isOpen is true', async(() => {
+            const fixture = createTestingModule(
+                NgSelectTestCmp,
+                `<ng-select [items]="cities"
+                            [isOpen]="true"
+                            bindLabel="name"
+                            [(ngModel)]="city">
+                </ng-select>`);
 
+            selectOption(fixture, KeyCode.ArrowDown, 0);
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(fixture.componentInstance.select.opened).toBeTruthy();
+            })
         }));
 
         it('should not close on option select when [closeOnSelect]="false"', fakeAsync(() => {
@@ -968,6 +984,12 @@ describe('NgSelectComponent', function () {
                 expect(select.opened).toBe(true);
             });
 
+            it('should not open dropdown when isOpen is false', () => {
+                select.isOpen = false;
+                triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
+                expect(select.opened).toBeFalsy();
+            });
+
             it('should open empty dropdown if no items', fakeAsync(() => {
                 fixture.componentInstance.cities = [];
                 tickAndDetectChanges(fixture);
@@ -1967,6 +1989,22 @@ describe('NgSelectComponent', function () {
             expect(fixture.componentInstance.select.selectedItems).toEqual([result]);
         }));
 
+        it('should not mark first item when isOpen is false', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectTestCmp,
+                `<ng-select [items]="cities"
+                    bindLabel="name"
+                    [isOpen]="false"
+                    [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            tick(200);
+            fixture.componentInstance.select.filter('pab');
+            tick(200);
+
+            expect(fixture.componentInstance.select.itemsList.markedItem).toBeUndefined();
+        }));
+
         it('should mark first item on filter when selected is not among filtered items', fakeAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -87,6 +87,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     @Input() appendTo: string;
     @Input() loading = false;
     @Input() closeOnSelect = true;
+    @Input() isOpen: boolean;
     @Input() hideSelected = false;
     @Input() selectOnTab = false;
     @Input() maxSelectedItems: number;
@@ -231,6 +232,8 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
                     break;
                 case KeyCode.Esc:
                     this.close();
+                    $event.preventDefault();
+                    $event.stopPropagation();
                     break;
                 case KeyCode.Backspace:
                     this._handleBackspace();
@@ -326,7 +329,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     }
 
     open() {
-        if (this.disabled || this.opened || this.itemsList.maxItemsSelected) {
+        if (this.disabled || this.opened || this.itemsList.maxItemsSelected || this.isOpen === false) {
             return;
         }
 
@@ -343,7 +346,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     }
 
     close() {
-        if (!this.opened) {
+        if (!this.opened || this.isOpen) {
             return;
         }
         this.opened = false;
@@ -437,7 +440,9 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
             this.typeahead.next(this.filterValue);
         } else {
             this.itemsList.filter(this.filterValue);
-            this.itemsList.markSelectedOrDefault(this.markFirst);
+            if (this.isOpen !== false) {
+                this.itemsList.markSelectedOrDefault(this.markFirst);
+            }
         }
     }
 
@@ -679,10 +684,10 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     }
 
     private _handleEnter($event: KeyboardEvent) {
-        if (this.opened) {
+        if (this.opened || this.isOpen === false) {
             if (this.itemsList.markedItem) {
                 this.toggleItem(this.itemsList.markedItem);
-            } else if (this.addTag) {
+            } else if (this.addTag && this.filterValue) {
                 this.selectTag();
             }
         } else {