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 virtual scroll #16727

Open
rgolonko opened this issue Nov 12, 2024 · 1 comment
Open

Component: AutoComplete with virtual scroll #16727

rgolonko opened this issue Nov 12, 2024 · 1 comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@rgolonko
Copy link

Describe the bug

The bug occurs when a user searches in the autocomplete input component with virtual scroll and reaches a "No results found" or ex. 1 suggestion state. Upon partially clearing the search term to bring back multiple results, the dropdown panel height does not automatically expand to display all results, remaining limited to a single row height.

Environment

Windows, Chrome

Reproducer

No response

Angular version

18.2.8

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.4.0

Browser(s)

Chrome 130

Steps to reproduce the behavior

  1. Go to https://primeng.org/autocomplete#virtualscroll
  2. Expan list by clickin blue arrow
  3. Type in input "item 0"
  4. Delete "0" in input
  5. Overly panel not resize to default scrollHeight
  6. Optional step: blur Autocomplete (click out the component), focus on input or click on blue down arrow - dialog still doesn't have correct size

Expected behavior

Dropdown panel automatically expands it's height to display multiple results

@rgolonko rgolonko 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 12, 2024
@rgolonko
Copy link
Author

rgolonko commented Nov 12, 2024

In my case working solutions is:

  1. Add @ViewChild('autoComplete') autoComplete: AutoComplete;
  2. In callback method onShow i added a line:
asyncScheduler.schedule(() => {
      this.autoComplete.scroller.unbindResizeListener();
      clearTimeout(this.autoComplete.scroller.resizeTimeout);     
});;

Wrapping is needed because viewInit() was called after onShow() callback in onOverlayAnimationStart(evnet) which set resizeTimeout function.
Function onResize in scroller component imo is the source of the problem and it is not needed in case of AutoComplete/MultiSelect components. Invoked function calculateAutoSize() is enough and call onResize() just break the height of panel.

Another soulition is for example ovveride function in @ViewChild setter for example if we wrapper component is used.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant