p-dropdown content position out of bounds

[stephanebouget]

Describe the bug

If dropdown is positionned at bottom of a page, content is displayed below the dropdown so it's cutted off :

before, dropdown content was displayed above the dropdown element :

Environment

16.8.0

Reproducer

No response

Angular version

16

PrimeNG version

16.8.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16

Browser(s)

No response

Steps to reproduce the behavior

https://stackblitz.com/edit/zy6kzt-jc5fst?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.ts,src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.scss,src%2Fstyles.scss,src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.html

Expected behavior

No response

[eXpertise7]

I can confirm this. One question, @stephanebouget do you maybe use pTemplate="selectedItem" & pTemplate="item" at any of your <p-dropdown> components? They tend not to work successfully together at primeng@16.8.0. Even when I put optionLabel="label" & optionValue="value" implicitly (before it was default). This has always worked.

Dropdown item I pick below which is pTemplate="selectedItem", won't get transfered properly in pTemplate="item".

If I don't put Optional Chaining operator ( ? ), user interface will break at primeng@16.8.0, won't even display dropdown (above).

---

Without Optional Chaining operator, result at Console Error:

Sorry, if I mix "apples and oranges", could be a different task, but it's same component.

[stephanebouget]

@eXpertise7 Yes I use pTemplate, but I think it's a different issue. You can create onother one

[jerkovicl]

@eXpertise7 have same issues

[cetincakiroglu]

I can confirm this. One question, @stephanebouget do you maybe use pTemplate="selectedItem" & pTemplate="item" at any of your <p-dropdown> components? They tend not to work successfully together at primeng@16.8.0. Even when I put optionLabel="label" & optionValue="value" implicitly (before it was default). This has always worked.

Dropdown item I pick below which is pTemplate="selectedItem", won't get transfered properly in pTemplate="item".

If I don't put Optional Chaining operator ( ? ), user interface will break at primeng@16.8.0, won't even display dropdown (above).

Without Optional Chaining operator, result at Console Error:

Sorry, if I mix "apples and oranges", could be a different task, but it's same component.

You don't need to specify optionValue along with optionLabel anymore, when optionLabel and optionValue are specified together the component omits the object and focuses on value, that's why template receives the value of the item instead of the item object.

[eXpertise7]

You don't need to specify optionValue along with optionLabel anymore, when optionLabel and optionValue are specified together the component omits the object and focuses on value, that's why template receives the value of the item instead of the item object.

Well, when I don't specify optionValue="value" dropdown will work normally visually, but my [(ngModel)] public variable bound to p-dropdown doesn't get value (dropdown item) that's being selected by an user.

I'm just more confused, already read other new issues:
#14171
#14172

Previously the selected template would pass the entire option array item to the pTemplate="selectedItem", both the optionLabel and optionValue could be passed as parameters into p-dropdown, this allowed the optionValue to be stored in the ngModel.

I don't know what I should do, what ever I do it doesn't work as before. I'm going to wait and see what you guys are going to decide on the other two opened issues.

I appreciate all the work done by PrimeNG Team and open sources that help here, but ideally stuff should work in the way how Angular Team does, without breaking current applications. But, but.

Still, thanks for the explanation.