Dropdown autowidth doesn't auto-size in some cases

[mroskamp]

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

Plunkr Case (Bug Reports)
http://plnkr.co/edit/bbBtMXd7M4M6oHKgYy5a?p=preview

Current behavior
If a dropdown isn't visible at component initialization time, the autowidth feature doesn't size the dropdown properly. Instead, it has a width of 30px, since the 'select' element is detected as having a width of 0px. See dropdown.ts:updateDimension().

Expected behavior
A dropdown with autowidth enabled should have the correct size, even if it's not visible on initialization.

Minimal reproduction of the problem with instructions

1. Add a dropdown component with options of various lengths
2. Make the dropdown hidden by default
3. Add a button to toggle the hidden state of the dropdown
4. Run the demo, click the toggle button. Notice how the dropdown is only 30px wide.

http://plnkr.co/edit/bbBtMXd7M4M6oHKgYy5a?p=preview

What is the motivation / use case for changing the behavior?
We have a dropdown with dynamic contents that's located in a modal. Due to the dynamic content of the dropdown, we want the dropdown to auto re-size. Since the dropdown is in a modal it's not visible on initialization, it's only visible after the user causes the modal to open, so the dropdown doesn't get sized properly.

To work around this issue, I've added an event handler in my component to manually call dropdown.updateDimensions() on the modal's show event. It'd be nice if this workaround wasn't needed and the dropdown automatically resized when it became visible.

• Angular version: 4.0.0

• PrimeNG version: 4.0.1

• Browser: all

• Language: all

[steigerm]

I even have this problem with the dropdown initially visible.
I made a component consisting of only one dropdown and used in one component it displays fine but used in another one its width is 30px (like desribed in this issue).
The main difference is that in the non-working case the dropdown is displayed inside a p-tabView.
Maybe this is the source of the problem?

btw, I see this as a bug not an enhancement.

[kito99]

I agree with @steigerm; this definitely looks like a bug. I see this with p-dropdown inside of a p-overlayPanel that isn't visible initially.

[fugree]

any update on this. i'm having same problem. dropdown that is populated from web api / service call. If you select an item, the dropdown re-sizes correctly, but until then it is sized like the OP describes

[jakob-bebop]

+1 i get a feeling I have to add [autoWidth]='false' in a lot of places...

[mf085]

This issue also appears on Tabview. I solved it with lazy loading feature. There you add an ng-template tag. For further details check here

[Royvhorck1]

Is there already an update or workaround for this?
I am having the same problem when opening a dialog with a tabview inside: here the dropdown is also very small width.
when having a dropdown in the main component there is no problem.
ps. my dropdown in the tabview is always visible. regarding the visibility mentions above