Nebular: nb-select selection issue

[KostyaDanovsky]

Issue type

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

• [x] bug report
• [ ] feature request

Issue description

Current behavior:

If nb-select was rendered and only after that list of options come from the server, it's not possible to select any option

Expected behavior:

If we load list of option after nb-select rendering it should be possible to select value

Steps to reproduce:

1) create component with nb-select and list of nb-option, which is generated by ngFor operator.
2) update list of possible options using setTimeout f.e. in your component
3) try to select new option

[swbradshaw]

I think this is a dupe of #1063

[aefox]

this actually works as expected as long as your nb-options correctly set their value attribute. please see this stackblitz for examples. If you remove the [value]="item" on the nb-options you'll see the problem you mentioned reproduces. but this is an incorrect usage of nb-option. cc: @nnixaa maybe this needs better documentation?

note: there's currently an issue with using ng-container as wrapper for nb-option but a fix is coming up really fast

[yggg]

Fixed in #1299

[glaucomorais]

Ng-container still can't be used inside a nb-select.
The stackblitz mentioned by @aefox has the problem as well.

[BruneXX]

Hi @glaucomorais, Really? I'm experiencing the same issue? currently there's no workaround for this? thanks!

[caiusCitiriga]

Still having this issue... and the example provided in the stackblitz does not work too. Any ideas?
My code looks like this

<nb-select id="mainCategory" fullWidth formControlName="mainCategory"
            (selectedChange)="onMainCategoryChange($event, null)">
    <nb-option *ngFor="let category of existingMainCategories" [value]="category">
        {{category | extractCatLocalizedName}}
    </nb-option>
</nb-select>

And the category structure is this one:

export interface ICategoryPOJO {
    value: string;
    displayName: {[k: string]: string};
}

Also the documentation states that the NbSelectComponent has a method called setValue but this method is protected and not accessible from the hosts using it.

Not with a clean way of course... but still, it does not set the value anyway...

But I've found a workaround: instead of giving an object to the nb-option just pass a primitive value, like a string, or number, then react to the selectedChange event like so:

<nb-select #mainCategoriesSelect id="mainCategory" fullWidth
            [selected]="store?.mainCategory?.value"
            (selectedChange)="onMainCategoryChange($event, null)">
    <nb-option *ngFor="let category of existingMainCategories" [value]="category.value">
        {{category | extractCatLocalizedName}}
    </nb-option>
</nb-select>

Here's a version with a multiple select, the only difference is that the select is marked as multiple and the value provided to the selected property is an array of strings instead of a string alone:

<nb-select id="mainCategory" [selected]="selectedSubCategoriesValues"
            fullWidth multiple (selectedChange)="onSubCategoriesChange($event, null)">
    <nb-option *ngFor="let category of subCategoriesForPickedCategory" [value]="category.value">
        {{category | extractCatLocalizedName}}
    </nb-option>
</nb-select>

implementation of selectedSubCategoriesValues:

get selectedSubCategoriesValues(): string[] {
    if (!this.store) { return []; }
    return this.store.subCategories.map(sc => sc.value);;
}

Of course this is not ideal, and should be fixed as soon as possible...