Dropdown value not set properly when options come later than value

[pmasterzz]

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

[ X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

https://stackblitz.com/edit/primeng-dropdown-demo-tefc6o?file=src/app/app.component.ts

Current behavior
When the options are set after the value is set then it sets the value to null. This is because when the value is set the dropdown tries to find the option that belongs to this value, but if the options are not available yet, then it will set the value to null.
By time the options are loaded (async) the value is null, and thus wont be able to find the actual value.

Expected behavior
It is expected that the value should not be set to null, but should keep it's value.

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/primeng-dropdown-demo-tefc6o?file=src/app/app.component.ts

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 5.X

• PrimeNG version: 5.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

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

[queueseven]

I also think something broke with 13.4.0. We had to wrap alot of AbstractControl.setValue(...) calls in a setTimeout(...) call as a workaround after upgrading to 13.4.0.

[olegkap]

I would like to add to this.
After doing some research, when page is loaded and dropdown options is changed, it triggers modelChange event, which should not and was not the case prior 13.4.0.

Thanks,
Oleg

[pete-mcwilliams]

We are also experiencing this issue, I suspect it is related to #8806. we have had to issue change detection between setting options and setting the value if being done in ngOnInit.

[sergeypayu]

We have the same issue

[sergeypayu]

@cetincakiroglu I think you also need to check if current value is not null before updating model:

this.selectedOption = this.findOption(this.value, this.optionsToDisplay);
        if (!this.selectedOption && this.value !== null) { // <-- check if current value is not null
            this.value = null;
            this.onModelChange(this.value);
        }

Otherwise empty formcontrol becomes dirty and obtain red border if current value of dropbox is null and options are changed.
Possible reason of the #11503

[zfyzjzzl]

Hi @cetincakiroglu , I am working on v15.4.1 for can't set 'value' and 'options' in the same time. Please refer to the initial commits below:
0fda766

I have a normal scenario that just need to change the obj and objList as below
<p-dropdown [(ngModel)]="obj" [options]="objList" optionLabel="name" placeholder=" ">

But after this change it seems I have to put obj before the objList, somehow there item is from backend I can't get it earlier. So I have to set it: obj = null; to avoid the exceptions. Finally the code become like:

this.http.post(..).subscribe(resp=>{
this.obj = null;
this.objList = resp;

setTimeout(()=>{
this.obj = xxxxx
},

) }) the worse problem is the is not stable and sometimes takes around 1 ~ 2 seconds, to avoid break I have to set it as the maximum time, and pages showing very slow. Do you have any idea to help with this situation?

[zfyzjzzl]

Hi @cetincakiroglu , I am working on v15.4.1 for can't set 'value' and 'options' in the same time. Please refer to the initial commits below: 0fda766

I have a normal scenario that just need to change the obj and objList as below <p-dropdown [(ngModel)]="obj" [options]="objList" optionLabel="name" placeholder=" ">

But after this change it seems I have to put obj before the objList, somehow there item is from backend I can't get it earlier. So I have to set it: obj = null; to avoid the exceptions. Finally the code become like:

this.http.post(..).subscribe(resp=>{ this.obj = null; this.objList = resp;

setTimeout(()=>{ this.obj = xxxxx },

) }) the worse problem is the is not stable and sometimes takes around 1 ~ 2 seconds, to avoid break I have to set it as the maximum time, and pages showing very slow. Do you have any idea to help with this situation?

I think I got my problem is because I put the 'placeholder' that blocked the default value, I removed and issue solved. ^_^