Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ngx-select issues with [ngModel] and async pipe #627

Open
barbados-clemens opened this issue Jun 14, 2021 · 1 comment
Open

ngx-select issues with [ngModel] and async pipe #627

barbados-clemens opened this issue Jun 14, 2021 · 1 comment

Comments

@barbados-clemens
Copy link
Contributor

ngx-select does not property display the selected value when using an inline array with ngModel

i.e.

<ngx-select [ngModel]='[model.someStringId]' (ngModelChange)="model.someStringId = $event[0]">
    <ngx-select-option *ngFor="let option of myOptions$ | async" [name]="option.name" [value]="option.value" ></ngx-select-option>
</ngx-select>

fix appears to be via using a property for the ngModel and using NgIf on the select for the stream;
i.e.

<ngx-select *ngIf="myOptions$ | async as options" [(ngModel)]="selection" (change)="handleChange($event[0])">
    <ngx-select-option *ngFor="let option of options" [name]="option.name" [value]="option.value" ></ngx-select-option>
</ngx-select>
selection: string[] = [model.someStringId]

Incorrect behavior demo
example of select behavior not selecting

markup causing behavior
markup from example

TODO: make reproducible

@barbados-clemens
Copy link
Contributor Author

Looks to be that the this.options is an empty array (or old values) when updating the list of options for selection inside of SelectInputComponent
potential fix would be to run the calcSelectedOptions function as a setting for the this.options to have those recalculated.

though I don't think this explains why the ngModel was not working when inlined [mode.someId]
🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants