Primeng: Listbox [options] not updating

[jboothe]

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

[x] bug report 

Current behavior
When updating or adding a new item to the [options] datasource of a listbox, the list is not updated in the DOM. This occurs when using a non-SelectItem data source.

Expected behavior
Expect the list to be bound to the data source and update when the data source changes.

Minimal reproduction of the problem with instructions
Create a data source like:

let ds = [{id: 1, name:'one'}, {id:2, name:'two'}]

Set options to ds

<p-listbox [options]="ds" optionLabel="name" dataKey="id" [(ngModel)]="selectedItem"></p-listbox>

Then change the options data source and note the list does not change in the DOM.

What is the motivation / use case for changing the behavior?
Eliminate brute force hacks like removing and adding p-listbox from the DOM to reset options binding.

Please tell us about your environment:
MacOS 10.12.6, VS Code, npm, angular-cli

• Angular version: 4.3.3

• PrimeNG version: 4.3.0

• Browser: all

• Language: TypeScript 2.3.4

• Node (for AoT issues): node --version =

[cagataycivici]

This is expected but due to a lack of docs which I've added now, seems like a bug;

Updating Options
When itemLabel property is used, Listbox does not detect changes in the options so provide a new reference when you need to update the options such as adding a new option.

addOption() {
    //fails
    this.options.push({name:'New York', code: 'NY'});

    //correct
    this.options = [...this.cities, {name:'New York', code: 'NY'}];
}

[AlejandroFlorin]

I don't understand this.

"this.options" refers to what? In the docs, the list box [options] points to the cities array. After changing the array with a new, altered or deleted item, how do you "provide a new reference" to get the list box to display the changes?

EDIT:
I get it. The sample code here and in the docs is wrong, it should read like this:

//fails
 this.cities.push({name:'New York', code: 'NY'});

//correct
this.cities = [...this.cities, {name:'New York', code: 'NY'}];

[Michael-Ziluck]

@cagataycivici I'm quite lost as to why you made that design choice. There are also several inconsistencies.
Say you use the listbox in your template like so:

<p-listbox [options]="cities" [(ngModel)]="currentModel" optionLabel="ID">

and perform operations on myModelArray, you get some interesting results:

// fails
this.cities.push({...});
this.cities.pop();

// succeeds
this.cities.length = 0;
this.cities= [...this.cities, {...}];

Why does this.cities.length = 0 work but not the push/pop operations? This undocumented inconsistency makes using your library so incredibly difficult.

[AlejandroFlorin]

Well, I don't know about incredibly difficult. There are some inconsistencies but they aren't that bad. I've been using the library for a couple of years to build a quite large application and it has been pretty straight forward. The docs for learning how to use the controls are mostly sufficient, though there are definitely some areas that could use work.

[Michael-Ziluck]

@AlejandroFlorin This library has some powerful components, I agree. But some things just baffle me. The inconsistencies in this thread, the fact it takes then MONTHS to reply to new issues on their repository, that they just arbitrarily close issues without actually coming to a conclusion, that there are parts of components _that are completely broken because they didn't account for invalid inputs in a public facing library_ like this:

Although the problem in the image is unrelated to this issue, it just goes to show how incredibly mismanaged their library is.

Throwing an error in the console rather than having proper error handling should absolutely _never_ occur in a public library, period.

[AlejandroFlorin]

@ZiluckMichael I definitely have seen a drop in response from them in the past 6 months. When I first started using the library a few years ago, I posted various issues on their forums and here and they were quite responsive and implemented the fixes in their next release. However, lately it has not been the same. I personally have couple of outstanding issues I posted some time ago and I have not heard a peep.