fix(select, autocomplete): don't open overlay without options (#2930)

akveo · Nov 17, 2021 · fca5cd1 · fca5cd1
1 parent 9ccec64
commit fca5cd1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/framework/theme/components/autocomplete/autocomplete.directive.ts b/src/framework/theme/components/autocomplete/autocomplete.directive.ts
@@ -235,7 +235,7 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
   }
 
   show() {
-    if (this.isClosed) {
+    if (this.shouldShow()) {
       this.attachToOverlay();
       this.setActiveItem();
     }
@@ -426,4 +426,8 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
   protected createScrollStrategy(): NbScrollStrategy {
     return this.overlay.scrollStrategies[this.scrollStrategy]();
   }
+
+  protected shouldShow(): boolean {
+    return this.isClosed && this.autocomplete.options.length > 0;
+  }
 }
diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
@@ -912,7 +912,7 @@ export class NbSelectComponent
   }
 
   show() {
-    if (this.isHidden) {
+    if (this.shouldShow()) {
       this.attachToOverlay();
 
       this.positionStrategy.positionChange.pipe(take(1), takeUntil(this.destroy$)).subscribe(() => {
@@ -1220,6 +1220,10 @@ export class NbSelectComponent
     }
   }
 
+  protected shouldShow(): boolean {
+    return this.isHidden && this.options?.length > 0;
+  }
+
   /**
    * Sets touched if focus moved outside of button and overlay,
    * ignoring the case when focus moved to options overlay.

diff --git a/src/framework/theme/components/select/select.spec.ts b/src/framework/theme/components/select/select.spec.ts
@@ -679,8 +679,8 @@ describe('Component: NbSelectComponent', () => {
   it('should not mark touched when select button loose focus and select open', fakeAsync(() => {
     const touchedSpy = jasmine.createSpy('touched spy');
 
-    const selectFixture = TestBed.createComponent(NbSelectComponent);
-    select = selectFixture.componentInstance as NbSelectComponent;
+    const selectFixture = TestBed.createComponent(NbSelectTestComponent);
+    select = selectFixture.debugElement.query(By.directive(NbSelectComponent)).componentInstance;
     selectFixture.detectChanges();
     flush();