fix(select): prevent opening of disabled select when clicking on togg…

…le (#1865)
akveo · Jul 29, 2019 · 0542371 · 0542371
1 parent 1072754
commit 0542371
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html
@@ -17,7 +17,8 @@
 
     <ng-template #placeholderTemplate>{{ placeholder }}</ng-template>
 
-    <nb-icon aria-hidden="true" icon="chevron-down-outline" pack="nebular-essentials"></nb-icon>
+    <nb-icon icon="chevron-down-outline" pack="nebular-essentials" (click)="disabled && $event.stopPropagation()" aria-hidden="true">
+    </nb-icon>
 </button>
 
 <div *nbPortal [ngClass]="optionsListClasses" [style.width.px]="hostWidth" class="options-list-container">

diff --git a/src/framework/theme/components/select/select.spec.ts b/src/framework/theme/components/select/select.spec.ts
@@ -606,6 +606,32 @@ describe('Component: NbSelectComponent', () => {
     expect(selectComponent.hostWidth).not.toEqual(selectElement.offsetWidth);
     expect(selectComponent.hostWidth).toEqual(buttonElement.offsetWidth);
   });
+
+  it('should not open when disabled and button clicked', fakeAsync(() => {
+    const selectFixture = TestBed.createComponent(NbSelectComponent);
+    selectFixture.componentInstance.disabled = true;
+    selectFixture.detectChanges();
+    const selectButton: HTMLElement = selectFixture.debugElement.query(By.css('button')).nativeElement;
+
+    selectButton.click();
+    flush();
+    fixture.detectChanges();
+
+    expect(selectFixture.componentInstance.isOpen).toBeFalsy();
+  }));
+
+  it('should not open when disabled and toggle icon clicked', fakeAsync(() => {
+    const selectFixture = TestBed.createComponent(NbSelectComponent);
+    selectFixture.componentInstance.disabled = true;
+    selectFixture.detectChanges();
+    const selectToggleIcon: HTMLElement = selectFixture.debugElement.query(By.css('nb-icon')).nativeElement;
+
+    selectToggleIcon.click();
+    flush();
+    fixture.detectChanges();
+
+    expect(selectFixture.componentInstance.isOpen).toBeFalsy();
+  }));
 });
 
 describe('NbSelectComponent - falsy values', () => {