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

DropDown set options and value at the same time #11559

Closed
IgorMenshikov opened this issue May 26, 2022 · 10 comments
Closed

DropDown set options and value at the same time #11559

IgorMenshikov opened this issue May 26, 2022 · 10 comments
Labels
Resolution: Cannot Replicate Issue could not be replicated by Core Team

Comments

@IgorMenshikov
Copy link

IgorMenshikov commented May 26, 2022

[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:
d2c3db6

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
Copy link
Author

PrimeNG 13.3.3 has no the issue

@cetincakiroglu cetincakiroglu added the Status: Pending Review Issue or pull request is being reviewed by Core Team label May 30, 2022
@olegkap
Copy link

olegkap commented May 31, 2022

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
Copy link

ikasparov commented Jun 14, 2022

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
Copy link
Contributor

Hi @IgorMenshikov ,

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

@cetincakiroglu cetincakiroglu added Resolution: Cannot Replicate Issue could not be replicated by Core Team and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Jun 14, 2022
@IgorMenshikov
Copy link
Author

Hi @cetincakiroglu !

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

@Menecats
Copy link
Contributor

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
Copy link

AlejandroFlorin commented Jul 7, 2022

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
Copy link

TheRealOha commented Sep 16, 2022

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
Copy link
Member

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,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Cannot Replicate Issue could not be replicated by Core Team
Projects
None yet
Development

No branches or pull requests

8 participants