The displayed value of the nb-select component is not up to date.

[osan15]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Refreshing the options of the nb-select component

Current behavior:
The selected element is not updated, however the "ngModel" or "selected" corresponds to the element.

Expected behavior:
The value of the select displayed corresponds to the selected value.

Steps to reproduce:
Update the value containing the options of the nb-select. The option array must not have the same object reference.

Related code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  public selected = { key: 1 };

  public defaultOptions = [];

  public options1 = [
    { key: 1, label: 'Key 1 selected' },
    { key: 2, label: 'Key 2 selected' },
    { key: 3, label: 'Key 3 selected' },
    { key: 4, label: 'Key 4 selected' },
    { key: 5, label: 'Key 5 selected' }
  ];

  public options2 = [
    { key: 6, label: 'Key 6 selected' },
    { key: 7, label: 'Key 7 selected' },
    { key: 8, label: 'Key 8 selected' },
    { key: 9, label: 'Key 9 selected' },
    { key: 10, label: 'Key 10 selected' }
  ];
  public i = 0;

  constructor() {}

  ngOnInit() {
    setInterval(() => {
      if (this.isOdd(this.i)) {
        this.defaultOptions = this.options1;
      } else {
        this.defaultOptions = this.options2;
      }
      this.i++;
    }, 2000);
  }

  isOdd(num: number) {
    return num % 2;
  }
}

test.component.ts

<select [(ngModel)]="selected.key">
  <option *ngFor="let column of defaultOptions" [value]="column.key" class="inline-filter">{{column.label}}</option>
</select>

<nb-select [(selected)]="selected.key" *ngIf="defaultOptions.length > 0">
  <nb-option *ngFor="let column of defaultOptions" [value]="column.key">
    {{column.label}}
  </nb-option>
</nb-select>

<nb-select [(ngModel)]="selected.key" *ngIf="defaultOptions.length > 0">
  <nb-option *ngFor="let column of defaultOptions" [value]="column.key">
    {{column.label}}
  </nb-option>
</nb-select>

<br><br>
Selected Key = {{selected.key}}

<pre>
  {{defaultOptions | json}}
</pre>

test.component.html

Other information:

In the example above the select HTML 5 is well updated compared to the nb-select (with ngModel or selected)

npm, node, OS, Browser

<!--
Node, npm: v12.13.0, v6.13.0
OS: Ubuntu 18.04.3 LTS
Browser: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) angular-electron/6.3.1 Chrome/78.0.3905.1 Electron/7.0.0 Safari/537.36"
-->

Angular, Nebular

<!--
    "@nebular/bootstrap": "^4.4.0",
    "@nebular/eva-icons": "4.5.0",
    "@nebular/theme": "4.5.0",

-->

[skeet94]

Can confirm this.
I cannot set the selected element after populating the options after retrieving data from the server.

Setting the selected element explicitely does work

<button (click)="selectedItem = '1'">Update Selected</button> where selectedItem is used [(selected)]="selectedItem"

---

Using nebular

"@nebular/theme": "^4.5.0", "@angular/core": "^8.2.14"

[BlindDespair]

Any update on this? I am having the same issue... I display list of my options using async pipe, because it does a backend call. And form value is patched on another backend call. So when value is set and then options are loaded and displayed the label on the select is not updated even if I explicitly call .setValue() with previously selected value.

[fofiedelly]

I'm exactly having the same issue.

[fofiedelly]

Update:

I was facing exactly the same issue also yesterday. If you are using FormControls you can set the value of the nb-select in your component and it will work.
step1: this.fb.group({ shop: [this.getDefaultElement(this.shoe.shop), [Validators.required]],....

#2145 (comment)

[asawicki96]

I just changed [(selected)] to [(ngModel)] and it works for me.