DropDown set options and value at the same time

[IgorMenshikov]

[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

Recently the change has been made: https://github.com/primefaces/primeng/commit/d2c3db62d644c7780c8fac12adaca5df59e8a7e8

It does not allow to set options and value at once:

1. drop down has no options and value
2. some event called a callback and it populated options and values at the same time

Current behavior Does not set a value if set options at the same callback function.

Expected behavior DropDown value has to be set together with options

HTML code:

<p-dropdown [options]="optionList" [(ngModel)]="value"
         optionLabel="Name"
         [showClear]="true" [style]="{'width':'100%'}">
</p-dropdown>

Initial state code:

this.optionList = [];
this.value = null;

Change code:

this.optionList = [{...}, {...}];
this.value = this.optionList[0];

I think the issue is caused by:

if (!this.selectedOption) {
            this.value = null;
            this.onModelChange(this.value);
        }

• Angular version: 13.3
• PrimeNG version: 13.4.1

[IgorMenshikov]

PrimeNG 13.3.3 has no the issue

[olegkap]

I agree, still having the same behavior.

The easy way to replicate it is to bind options to async pipe. So what would happened is options would be assigned null at first which would trigger model change event even so model was not bounded yet.

I agree that 13.3.3 has no such issue and from looking into code it looks like options binding logic was changed.

Thanks, Oleg

[ikasparov]

I have the same problem. Also this model trigger makes the dropdown dirty. It's triggering validation and set box to red because I use ng-dirty as state of user touch

[cetincakiroglu]

Hi @IgorMenshikov ,

Couldn't replicate the issue, could you please provide a StackBlitz example?

[IgorMenshikov]

Hi @cetincakiroglu !

I am not sure how to quickly create PrimeNG example on StackBlitz. Is there any template for that?

[cetincakiroglu]

https://stackblitz.com/github/primefaces/primeng-issue-template?file=src%2Fapp%2Fapp.component.ts

[Menecats]

Hi @cetincakiroglu, you can find an example of this issue here: https://stackblitz.com/edit/primeng-issue-11559?file=src/app/app.component.ts

You can see how, just by receiving the options asynchronously, the drop down emits a null model change if the current value is not present in the given options, even if the current value was already null

I've highlighted the 'ng-dirty' state of the example with an exaggerated overflow color, but you can see that the default theme validation (.ng-invalid.ng-dirty) kicks in and sets the border-color to red

[AlejandroFlorin]

Same issue with 13.4.1. This is only happening to DDLs populated via an async call to the back end. The DDL's dirty flag looks fine after the call but it gets set to dirty at some point after. We have code on canDeactive to fire a "Save Changes" dialog if the form is dirty and the DDL's dirty flag is set to true by then, preventing the user from leaving the screen. 13.3.3 seems to be ok (after clearing build cache)

[TheRealOha]

Can confirm that this issue is present in 13.3.3 and 13.4.1 When chaining multiple Requests with rxjs forkJoin(), the dropdown Options are empty, up until the callback is finished. I spent three days figuring out why my dropdowns ngModels were not set, even when I could see the corresponding global variables being correctly filled based on the options while inside the callback. But once the callback closed, the global variables were null again. EDIT: After artificially creating two separate callback cycles, one loading the dropdown options asynchronously and the other to set the ngModel once the options were loaded, it worked. If you need a repo let me know, I can try to create one.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,