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

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",

-->

[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]],....

https://github.com/akveo/nebular/issues/2145#issuecomment-622490714

[asawicki96]

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