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

Dropdown: In PrimeNG 16.7.1 interacting with dropdown causes panel to scroll #14039

Closed
rosenthalj opened this issue Nov 6, 2023 · 2 comments
Closed
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@rosenthalj
Copy link
Contributor

Describe the bug

If a horizontal scroll bar is present, when a user clicks on the dropdown component or uses the mouse key to navigate the dropdown menu options, the panel containing the dropdown will scroll to the beginning of the visible region.

This is a similar to issue #13390 that was fixed on September 26th.

The first video demonstrates the problem when the user clicks on the dropdown to open and then clicks on the dropdown's "down carrot icon" to close.

DropdownScrollAfterClick.mov

Angular_Dropdown_Component

The second video demonstrates the scrolling problem when the user navigates the dropdown menu options using only the keyboard .

DropdownScrollAfterKeyboardNavigation.mov

Environment

mac os and windows os

Reproducer

https://stackblitz.com/edit/nkd8th

Angular version

16.x

PrimeNG version

16.7.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.1

Browser(s)

safari, chrome, firefox

Steps to reproduce the behavior

To reproduce the mouse click problem

  1. Run the reproducer: https://stackblitz.com/edit/nkd8th
  2. Mouse Click on dropdown
  3. The dropdown option menu should then be displayed
  4. Close the dropdown option menu by mouse clicking on the dropdown's "carrot down icon"
  5. The panel containing the dropdown will scroll to the beginning of the horizontal scrollable viewable region

To reproduce the keyboard problem

  1. Run the reproducer: https://stackblitz.com/edit/nkd8th
  2. Mouse Click on the dropdown (or navigate to the dropdown and press the enter key)
  3. The dropdown option menu should then be displayed
  4. Click the "down arrow key"
  5. The panel containing the dropdown will scroll to the beginning of the horizontal scrollable viewable region

Expected behavior

The panel containing the dropdown should not scroll

@rosenthalj rosenthalj 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 6, 2023
@rosenthalj
Copy link
Contributor Author

For completeness, I searched the PrimeNG code baseline for other places where there may be similar issues. See annotated screenshot listed below.

Code_search_results_and_Karma

@cetincakiroglu cetincakiroglu added this to the 16.8.0 milestone Nov 8, 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 8, 2023
cetincakiroglu added a commit that referenced this issue Nov 8, 2023
Fix  for PrimeNG 16.7.1 interacting with dropdown causes panel to scroll #14039
@cetincakiroglu cetincakiroglu modified the milestones: 16.7.2, 16.8.0 Nov 8, 2023
@cetincakiroglu
Copy link
Contributor

Hi,

We've fixed two issues you've mentioned with the version 16.7.2, they both works as expected in the latest version.
Here is the example containing both issues happening in 16.7.1 https://stackblitz.com/edit/z78n8c?file=src%2Fapp%2Fdemo%2Fdropdown-basic-demo.html

Closing this and #14078 since it's already fixed within 16.7.2.

Thanks for reporting the issue!

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

2 participants