Primeng: Dropdown autoWidth is not updated on value change

[PoulTur]

I'm submitting a bug report
Plunker:
https://plnkr.co/edit/YBl5bOWqGTT3Ve5vMdg2

Current behavior
When p-dropdown is opened from a dialog and initialized with a value, the drop-down is rendered empty. The default value is not selected.

Expected behavior
This should work in a dialog the same way as it works elsewhere, as it is a common use case

Minimal reproduction of the problem with instructions
See plunker. The potential workaround is to pull the list of options from a remote location (or do some delays with code) as there is likely some order of rendering that causes this issue.

What is the motivation / use case for changing the behavior?
Make the PrimeNg framework work right.

Please tell us about your environment:VS Code, Plunker

• Angular version: 4.2.4, 4.3.0
• PrimeNG version: 4.2.3, 4.3.0
• Browser: [all |
• Language: [TypeScript]
• Node (for AoT issues): node --version =

[dimaslanidis]

Same issue with

Angular version: 5.1.3
PrimeNG version: 5.0.2

[dimaslanidis]

Hi,

Try to give a custom width by yourself like the following.

Read from https://github.com/primefaces/primeng/issues/524
I tried it and it worked.

It would be nice though someone to worl on this issue.

[PoulTur]

Hi,
I ended up putting the dialog in the child component instead. The solution works without problems, also, is conceptually much cleaner. The dialog buttons can be treated then as part of the form, they can e.g. react directly to the submit event or form validity changes (no need to pass these around to parent via event emitters).

[KamelJabber]

@dimaslanidis
WOW!

I was scouring the internet looking for anything related to my p-dropdown issue and tried the style trick and it worked!

+1 !!!

My scenario is as follows:
I have a p-tabView that has a component, with a p-table that has a p-dropdown inside of a body template.

  p-tabPanel
    a-component  *ngIf
      p-table
        ng-template-body
          p-dropdown

On initial rendering everything is fine. However, I have an ngIf on a-component. When it's hidden then re-shown the p-dropdown is not rendering the selected item. However, if I just click on the dropdown it displays the selected item properly. In fact, seems like any change triggers it to display properly. For example if the p-dropdown is part of an expansionrow, simply expanding the row displays it correctly.

I was searching for ways to "trigger this render" and was going through every option on p-dropdown.

So when I saw your [style] suggestion, I thought EUREKA, that might "trigger" the display to render properly, and turns out it did!!!

:D

Note: if the devs are need a replicable scenario I can try to put one together on stackblitz

[guillep2k]

I've used width: auto, because I didn't want to fill the whole row with the control. It's a hack, anyway.