fix(select): update selected after cd run is finished (#1299)

akveo · Mar 14, 2019 · 2a1f113 · 2a1f113
1 parent b3cebda
commit 2a1f113
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 9 deletions.
diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
@@ -321,6 +321,19 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
  this.createOverlay();
  }
 
+ ngAfterContentInit() {
+ if (this.queue) {
+ // Call 'writeValue' when current change detection run is finished.
+ // When writing is finished, change detection starts again, since
+ // microtasks queue is empty.
+ // Prevents ExpressionChangedAfterItHasBeenCheckedError.
+ Promise.resolve().then(() => {
+ this.writeValue(this.queue);
+ this.queue = null;
+ });
+ }
+ }
+
  ngAfterViewInit() {
  this.triggerStrategy = this.createTriggerStrategy();
 
@@ -329,13 +342,6 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
  this.subscribeOnSelectionChange();
  }
 
- ngAfterContentInit() {
- if (this.queue) {
- this.writeValue(this.queue);
- this.cd.detectChanges();
- }
- }
-
  ngOnDestroy() {
  this.alive = false;
 

diff --git a/src/framework/theme/components/select/select.spec.ts b/src/framework/theme/components/select/select.spec.ts
@@ -5,7 +5,7 @@
  */
 
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
 
 import { NbSelectModule } from './select.module';
 import { NbThemeModule } from '../../theme.module';
@@ -75,6 +75,24 @@ export class NbSelectTestComponent {
  groups = TEST_GROUPS;
 }
 
+@Component({
+ template: `
+ <nb-layout>
+ <nb-layout-column>
+ <nb-select [selected]="selected">
+ <nb-option *ngFor="let option of options" [value]="option">{{ option }}</nb-option>
+ </nb-select>
+ </nb-layout-column>
+ </nb-layout>
+ `,
+})
+export class NbSelectWithInitiallySelectedOptionComponent {
+ @Input() selected = 1;
+ @Input() options = [ 1, 2, 3 ];
+
+ @ViewChild(NbSelectComponent) select: NbSelectComponent<number>;
+}
+
 describe('Component: NbSelectComponent', () => {
  let fixture: ComponentFixture<NbSelectTestComponent>;
  let overlayContainerService: NbOverlayContainerAdapter;
@@ -96,7 +114,7 @@ describe('Component: NbSelectComponent', () => {
  NbLayoutModule,
  NbSelectModule,
  ],
- declarations: [NbSelectTestComponent],
+ declarations: [ NbSelectTestComponent, NbSelectWithInitiallySelectedOptionComponent ],
  });
 
  fixture = TestBed.createComponent(NbSelectTestComponent);
@@ -221,4 +239,15 @@ describe('Component: NbSelectComponent', () => {
  expect(button.textContent).toContain('1 noitpO');
  })
  });
+
+ it('should select initially specified value without errors', fakeAsync(() => {
+ const selectFixture = TestBed.createComponent(NbSelectWithInitiallySelectedOptionComponent);
+ selectFixture.detectChanges();
+ flush();
+
+ const selectedOption = selectFixture.componentInstance.select.options.find(o => o.selected);
+ expect(selectedOption.value).toEqual(selectFixture.componentInstance.selected);
+ const selectButton = selectFixture.nativeElement.querySelector('nb-select button') as HTMLElement;
+ expect(selectButton.textContent).toEqual(selectedOption.value.toString());
+ }));
 });