primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.26k stars 4.56k forks source link

p-sidebar: suggestion panel of autocomplete is closed when scrolling inside p-sidebar component #13613

Closed Ixiondbz closed 7 months ago

Ixiondbz commented 1 year ago

Describe the bug

This bug occurs when you place the autocomplete component(p-autoComplete) inside a sidebar component(p-sidebar). Whenever the suggestion panel of autcomplete is opened, it is hidden automatically whenever the user tries to scroll(vertically) in the sidebar. This phenomena doesn't occur if p-autoComplete is placed outside of p-sidebar. This behavior causes an unpleasant user experience in mobile devices.

Edit: This same behavior also happens to p-dropdowns, p-multiselect and even p-dialog component.

Environment

Angular: 16.2.0 Primeng: 16.3.1

Reproducer

https://stackblitz.com/edit/8usf2g?file=package-lock.json

Angular version

16.2.0

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.0

Browser(s)

No response

Steps to reproduce the behavior

  1. Create a primeng page with a p-sidebar component that possibly uses a button to open the sidebar.
  2. Place one p-autoComplete component inside the p-sidebar and a second p-autoComplete outside p-sidebar.
  3. Run the angular app.
  4. Click OR type some characters in p-autoComplete component that is placed OUTSIDE of p-sidebar to trigger open the suggestion panel. Try to scroll up and down outside of the suggestion panel using mouse(for laptops/PCs) or finger touch(mobile screens/tablets).
  5. Click OR type some characters in p-autoComplete component that is placed INSIDE of p-sidebar to trigger open the suggestion panel. Try to scroll up and down outside of the suggestion panel using mouse(for laptops/PCs) or finger touch(mobile screens/tablets).

Expected behavior

Scrolling both inside and outside of p-sidebar shouldn't affect the visibility of p-autoComplete's suggestion panel.

The panel should remain open if the user scrolls inside the sidebar just as it remains open if they scroll outside of p-sidebar.

Basimohd commented 1 year ago

There should not be style="height: 1200px" in p-sidebar. Its a component not a element tag.

Ixiondbz commented 1 year ago

There should not be style="height: 1200px" in p-sidebar. Its a component not a element tag.

I agree. However, this doesn't cause the issue.

pragyaInexture08 commented 11 months ago

Also when I have autocomplete inside sidebar, and sidebar when opened from right, then everythings is fine it takes left: -35px auto-adjusts. But when sidebar is opened form left, autocomplete doesn't auto adjusts and scroll start coming, and above issue comes.

github-actions[bot] commented 7 months ago

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

github-actions[bot] commented 7 months ago

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!