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

Component: Autocomplete with long list of options adds scrollbar to the whole page #14281

Closed
tsinevik opened this issue Dec 6, 2023 · 0 comments · Fixed by #14405
Closed
Labels
LTS-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@tsinevik
Copy link
Contributor

tsinevik commented Dec 6, 2023

Describe the bug

If Autocomplete has a long list of options then the scrollbar will appear on the whole page and it is possible to scroll the page while overlay is opened. The scrollbar should appear only inside dropdown list.

image image

Environment

Any environment

Reproducer

https://stackblitz.com/edit/fzpufg?file=src%2Fapp%2Fdemo%2Fautocomplete-basic-demo.html,src%2Fapp%2Fdemo%2Fautocomplete-basic-demo.ts

Angular version

17.0.0

PrimeNG version

17.0.0-rc.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

No response

Steps to reproduce the behavior

https://stackblitz.com/edit/fzpufg?file=src%2Fapp%2Fdemo%2Fautocomplete-basic-demo.html,src%2Fapp%2Fdemo%2Fautocomplete-basic-demo.ts

  1. While autocomplete is not active the page is not scrollable
  2. Focus autocomplete and type any symbol
  3. Dropdown will be displayed with scrollbars both inside dropdown list as well as on the page
  4. The whole page is scrollable

Expected behavior

The page should not be scrollable when dropdown is displayed. Only the list inside dropdown should be scrollable.

@tsinevik tsinevik added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 6, 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 Dec 20, 2023
@cetincakiroglu cetincakiroglu added this to the 17.2.0 milestone Dec 20, 2023
cetincakiroglu added a commit that referenced this issue Dec 20, 2023
Fix #14281 - Autocomplete with long list of options make the whole page scrollable
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
LTS-PORTABLE Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants