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();