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: p-dropdown-open style is missing from dropdown #15762

Closed
jaspertolsma opened this issue May 30, 2024 · 2 comments · Fixed by #15866 · 4 remaining pull requests
Closed

p-dropdown: p-dropdown-open style is missing from dropdown #15762

jaspertolsma opened this issue May 30, 2024 · 2 comments · Fixed by #15866 · 4 remaining pull requests
Labels
LTS-16-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@jaspertolsma
Copy link

Describe the bug

We have a chevron icon that rotates when our p-dropdowns are opened. To detect whether a dropdown is opened we use the p-dropdown-open class. We were on PrimeNG 15.4.1 and updated recently to PrimeNG 17.7.0. In this version of PrimeNG the p-dropdown is missing the p-dropdown-open class. It is still mentioned in the docs, however in this commit you can see it is removed. Without this class we cannot detect whether the dropdown is opened.

The p-inputwrapper-focus class has partial overlap with the p-dropdown-open class, but is also set when the dropdown is focused, but not opened, so doesn't fit our use case.

Environment

Chrome

Reproducer

No response

Angular version

17.3.10

PrimeNG version

17.17.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18

Browser(s)

No response

Steps to reproduce the behavior

  1. Open a primeng dropdown
  2. See in the html that the class p-dropdown-open is not set.

Expected behavior

  1. Open a primeng dropdown
  2. The class p-dropdown-open is set on the dropdown.
@jaspertolsma jaspertolsma added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 30, 2024
@B34v0n
Copy link

B34v0n commented Jun 13, 2024

Hi, I just had the same issue, but I was able to find a workaround.
You can use the aria-expanded-tag to see if it is opened:

p-dropdown div.p-dropdown div.p-dropdown-trigger[aria-expanded='true'] {
    rotate: 180deg;
}

@willmca
Copy link
Contributor

willmca commented Jun 19, 2024

@jaspertolsma @B34v0n I have raised a PR that will address this issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment