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

MultiSelect Component: onSelectAllChange() logic in VirtualScroll is incorrect. #15273

Closed
kroger-renu opened this issue Apr 15, 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

@kroger-renu
Copy link

kroger-renu commented Apr 15, 2024

Describe the bug

If we do not add VirtualScroll in the multiselect, onSelectAllChange logic works fine, clicking on Header Checkbox selects only the valid options even after filtering. But to improve the performance of the multiselect, if we add VirtualScroll the onSelectAllChange() logic marks all the items present in the list as checked.
Expected behaviour- it should check if filtering is applied or not, if filters are there then only visible valid options should be selected/deselected (as in the actual behavior of Multiselect without VirtualScroll in v17.11.0). Handle select and deselect both the scenarios.
Actual:
Screenshot (1)
Screenshot (3)

Expected:
Screenshot (4)

Another bug, if we have previously selected any item from the multiselect and search any keyword using filter. Clicking on SelectAll checkbox will reset previously selected items and select only the visible ones.
Actual:
Screenshot (8)
Screenshot (7)

Expected: Selected Rome initially, then searched "n", on clicking selectAll now 4 items should be there (Rome, New York, London, Istanbul) instead of new 3 (New York, London, Istanbul).
Screenshot (6)
Screenshot (5)

Environment

Angular CLI: 17.3.3
Angular: 17.3.2
Node: 20.9.0
zone.js: 0.14.4
Typescript: 5.2.2
Package Manager: npm 10.1.0
OS: win32 x64

Reproducer

No response

Angular version

17.3.2

PrimeNG version

17.11.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.9.0

Browser(s)

No response

Steps to reproduce the behavior

Add VirtualScroll in your multiselect component, add the given onSelectAllChange() logic in the primeng demo example or you can directly reproduce this in the example demo given on the primeng website.

  1. Go to the multiselect dropdown,
  2. Click on the search filter, search for some keyword,
  3. Click on Select All header checkbox
  4. You will see all the items present in the dropdown will be marked "checked", instead of only visible optionsList after filtering based on the search input.

Expected behavior

SelectAll should only select/deselect the visible option list if filtering is applied.

@kroger-renu kroger-renu added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 15, 2024
@kroger-renu
Copy link
Author

A new and enhanced issue has been created, this issue can be deleted now.

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