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

p-dropdown content position out of bounds #14162

Closed
stephanebouget opened this issue Nov 21, 2023 · 5 comments
Closed

p-dropdown content position out of bounds #14162

stephanebouget opened this issue Nov 21, 2023 · 5 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@stephanebouget
Copy link

stephanebouget commented Nov 21, 2023

Describe the bug

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

image

before, dropdown content was displayed above the dropdown element :

image

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

@stephanebouget stephanebouget added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 21, 2023
@cetincakiroglu cetincakiroglu added this to the 16.9.0 milestone Nov 21, 2023
@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 21, 2023
@cetincakiroglu cetincakiroglu self-assigned this Nov 21, 2023
@eXpertise7
Copy link

eXpertise7 commented Nov 21, 2023

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 [email protected]. 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".

image

If I don't put Optional Chaining operator ( ? ), user interface will break at [email protected], won't even display dropdown (above).

image


Without Optional Chaining operator, result at Console Error:

image

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

@stephanebouget
Copy link
Author

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

@jerkovicl
Copy link

@eXpertise7 have same issues

@cetincakiroglu
Copy link
Contributor

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 [email protected]. 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".

image

If I don't put Optional Chaining operator ( ? ), user interface will break at [email protected], won't even display dropdown (above).

image

Without Optional Chaining operator, result at Console Error:

image

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

eXpertise7 commented Nov 21, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

4 participants