NbSelect doesn't display the [selected] option if data is dynamic

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

Current behavior: I have a NbSelect populated with options from the database. Neither using [selected] or ([ngModel]) makes it display the selected value. As soon as I pass static data it works as intended.

Expected behavior: It should automatically select the selected option.

Steps to reproduce: Put NbSelect on page, have a simple MySQL database to support the exchange of data, take the data and put them as options.

Related code: Unfortunately since it requires my localhost mySQL here, I can’t provide a stackblitz, but I can include some snippets.

header.component.html

<nb-select (selectedChange)="changeLang($event)" ([ngModel])="selectedLang">
    <nb-option *ngFor="let lang of languages" [value]="lang">{{ lang.short }}</nb-option>
  </nb-select>

header.component.ts

service.exp.subscribe((exp: any) => {
      this.languages = exp.langs.map(x => {
        return {
          short: x.short,
          name: x.name
        }
      });

      this.selectedLang.next(this.languages.filter(x => x.short === translate.currentLang)[0]);
    });

header.service.ts

this.server.getLangsList().subscribe((langs: any) => {
        this.exp.next({
          langs: langs
      });
    });

server.service.ts

getLangsList() {
    return this.request('GET', `http://localhost:8080/langs`);
    //return of([{"idLang":1,"short":"en","name":"English","dateFormat":"YYYY-MM-DD","dateTimeFormat":"YYYY-MM-DD HH:mm:ss"}]);
  }

Now, in the last snippet, the two rows return the same Observable. In the caso of the second (static data) it displays the [selected] value correctly, in the first it doesn’t.

I’m not sure it’s related to the issue 2088, so I started a new issue #2088

Other information:

npm, node, OS, Browser

Node version 10.16.0
npm version 6.10.3
Windows 10, on Chrome

Angular, Nebular

ngx-admin v4.0.1, nebular v4.1.2

[ironsm4sh]

I have used @shireefadel’s workaround as follows:

1. in the html, add a #select on the nb-select element.

<nb-select fullWidth multiple formControlName="mySelected" #select>

1. Add an angular viewchild to the nb-select element

@ViewChild('select') selectElem: NbSelectComponent;

1. Add a workaround timeout and call it when the dynamic content changes

changeMyDynamicContent() {
  ...Logic here...

  setTimeout(() => {
    if (this.selectElem) {
      const selectedOptions: NbOptionComponent[] = [];
      for (const option of this.selectElem.options['_results']) {
        if (mySelected.includes(option.value)) {
          selectedOptions.push(option);
        }
      }
      for (const option of selectedOptions) {
        this.selectElem['selectOption'](option);
      }
      this.selectElem['cd'].detectChanges();
    }
  }, 500);
}

This is extremely dirty, but it will work until this bug is fixed.

[rardila-uniajc]

I have used @shireefadel’s workaround as follows:

1. in the html, add a #select on the nb-select element.

<nb-select fullWidth multiple formControlName="mySelected" #select>

1. Add an angular viewchild to the nb-select element

@ViewChild('select') selectElem: NbSelectComponent;

1. Add a workaround timeout and call it when the dynamic content changes

changeMyDynamicContent() {
  ...Logic here...

  setTimeout(() => {
    if (this.selectElem) {
      const selectedOptions: NbOptionComponent[] = [];
      for (const option of this.selectElem.options['_results']) {
        if (mySelected.includes(option.value)) {
          selectedOptions.push(option);
        }
      }
      for (const option of selectedOptions) {
        this.selectElem['selectOption'](option);
      }
      this.selectElem['cd'].detectChanges();
    }
  }, 500);
}

This is extremely dirty, but it will work until this bug is fixed.

thanks, it helped me a lot to create a generic function

static setOptionNbSelect(selectComponent: NbSelectComponent, optToCompare: any) {
    setTimeout(() => {
        if (selectComponent) {
            const selectedOptions: NbOptionComponent[] = [];
            for (const option of selectComponent.options['_results']) {
                if (_.isEqual(optToCompare, option['value'])) {
                    selectedOptions.push(option);
                    break;
                }
            }
            for (const option of selectedOptions) {
                selectComponent['selectOption'](option);
            }
            selectComponent['cd'].detectChanges();
        }
    }, 500);
    
}

I hope it works for someone else. Thanks again @ironsm4sh