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.

Sign up for GitHub

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

Jump to bottom

DomHandler.js: getComputedStyle getPropertyValue should be in hyphen case. #6055

Closed
hitosu opened this issue Feb 29, 2024 · 4 comments · Fixed by #6060
Closed

DomHandler.js: getComputedStyle getPropertyValue should be in hyphen case. #6055

hitosu opened this issue Feb 29, 2024 · 4 comments · Fixed by #6060
Assignees
@melloware
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone
10.5.2

Comments

@hitosu
Copy link

hitosu commented Feb 29, 2024

Describe the bug

scrollInView in DomHandler does not scroll to the very top of dropdown list if that list has top border or padding.
This is happening because getPropertyValue gets values using camel case (borderTopWidth) instead of hyphen case (border-top-width)
Additionally, there the same problem in getScrollableParents function with overflowX and overflowY.

Reproducer

No response

PrimeReact version

10.5.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

any

Steps to reproduce the behavior

  1. Make a custom theme where dropdown lists have either top border or top padding.
  2. Try to keyboard navigate such list with more items that fits into dropdown.
  3. When navigating up list is not scrolled to the very top.

Expected behavior

Changing getPropertyValue arguments to hyphen case resolves the problem.
@hitosu hitosu added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 29, 2024
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Feb 29, 2024
melloware added a commit to melloware/primereact that referenced this issue Feb 29, 2024
@melloware
Fix primefaces#6055: DomHandler incorrect case for computed styles
0ed7712
@melloware melloware self-assigned this Feb 29, 2024
@melloware melloware added this to the 10.5.2 milestone Feb 29, 2024
@melloware melloware mentioned this issue Feb 29, 2024
Merged
@melloware
Copy link
Member

great catch! Please review my PR.

@hitosu
Copy link
Author

hitosu commented Mar 1, 2024

great catch! Please review my PR.

Yes, all good!

@hitosu hitosu closed this as completed Mar 1, 2024
@melloware melloware reopened this Mar 1, 2024
@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 1, 2024
@melloware
Copy link
Member

I will leave this open until it's merged

@hitosu
Copy link
Author

hitosu commented Mar 1, 2024

Sure, sorry :)

@melloware melloware removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Mar 1, 2024
nitrogenous added a commit that referenced this issue Mar 18, 2024
@nitrogenous
Merge pull request #6060 from melloware/PR6055
f39d2f3 
Fix #6055: DomHandler incorrect case for computed styles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@melloware melloware

Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Milestone
10.5.2
Development

Successfully merging a pull request may close this issue.

Fix #6055: DomHandler incorrect case for computed styles melloware/primereact
2 participants
@hitosu @melloware