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 (filter perspective is missing). #15294

Closed
joshi-renu opened this issue Apr 18, 2024 · 2 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@joshi-renu
Copy link

Describe the bug

When VirtualScroll is not incorporated in the Multiselect, the onSelectAllChange logic functions as expected. Specifically, clicking on the header checkbox results in the selection of only the valid options, even after applying filters.

However, when VirtualScroll is implemented to enhance the Multiselect's performance, a discrepancy arises. The onSelectAllChange() logic seems to mark all items present in the list as selected, regardless of the applied filters.

Expected Behavior
The anticipated behavior is for the logic to determine whether filtering has been applied or not. If filters are present, then only the visible and valid options should be selected or deselected. This functionality aligns with the actual behavior of Multiselect without VirtualScroll in version 17.11.0. The expectation is for this to handle both selection and deselection scenarios appropriately.
Screenshot (159)

Actual Behavior
The implemented logic selects/deselects all the items in the options list, even with filters.
Screenshot (160)
Screenshot (161)

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

  1. Implement VirtualScroll in the Multiselect component and add the onSelectAllChange() logic as provided in the PrimeNG demo example. This can also be reproduced directly on the demo example given on the PrimeNG website.
  2. Navigate to the Multiselect dropdown.
  3. Click on the search filter and enter a keyword.
  4. Click on the Select All header checkbox.
  5. You will observe that all items present in the dropdown, not just those matching the filter criteria, are marked as "checked".

Expected behavior

The anticipated behavior is for the SelectAll checkbox to only select/deselect the visible options in the dropdown list, provided a filter is applied. The SelectAll checkbox should not affect items that do not match the applied filter criteria.
Screenshot (159)

@joshi-renu joshi-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 18, 2024
@cetincakiroglu cetincakiroglu added this to the 17.15.0 milestone Apr 19, 2024
@cetincakiroglu
Copy link
Contributor

Hi,

This issue is superseeded by #15373

Thanks a lot for reporting the issue, we'll add new template options and update the demo to make this possible.

Closing the issue.

@cetincakiroglu cetincakiroglu removed this from the 17.15.0 milestone Apr 26, 2024
@joshi-renu
Copy link
Author

I see the changes to headercheckbox template- selectAll logic has been incorporated but on deselecting an item, selectAll should also deselect, which is still a bug.

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

2 participants