Component: MultiSelect (p-multiSelect) no longer emits an event when all items are selected or deselected

[jim-heath]

Describe the bug

I updated my project from Angular 16.1.5 to 17.0.3 and PrimeNG 16.0.2 to 16.4.2. I use the MultiSelect component among many other great components from PrimeNG but noticed the onChange event is no longer being emitted when clicking the check box to select all items in the list or when deselecting them all.

I reviewed the documentation for PrimeNG and found a new event called onSelectAllChange and figured that was my problem, but this event never gets emitted when selecting/deselecting all items.

I also tried updating to various PrimeNG releases after 16.4.2 through 17.0.0-rc.1 and they all have this issue. I returned to PrimeNG 16.0.2 for the time being until this issue is resolved.

I provided a link to a StackBlitz project reproducing the issue but I'd be happy to provide more information if needed.

Environment

Angular app with PrimeNG

Reproducer

https://stackblitz.com/edit/angular-znfmqm-6vy1k6?file=src%2Fapp%2Fdemo%2Fmuilti-select-basic-demo.html

Angular version

17.0.3

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

Firefox 120.0, Chrome 119.0.6045.200

Steps to reproduce the behavior

Connect the onChange and/or onSelectAllChange to event handlers in your component.

Expected behavior

The onChange event or onSelectAllChange event should be emitted from the MultiSelect component when the check box at the top of the list is checked or unchecked.

[brunoroque06]

There is also an issue when filtering, and then selecting all of the filtered items, where this onChange is not emitted. I think primeng version 16.7.2 still emits this onChange (on filtered) event, but then it broke on 16.8.0 . Angular version: 16.2.10 .

[jermylucas]

You need to include the [selectAll]="selectAll" in your code

[jim-heath]

You need to include the [selectAll]="selectAll" in your code

I've tried that input, when selectAll is set to true, the check box at the top of the list is always checked and cannot be unchecked. Plus clicking does not toggle the selection of all the items in the list. Likewise, when set to false, it remains unchecked and exhibits the same behavior. However I did notice that including the use of the selectAll input for the component, it does emit the onSelectAllChange event.

[jermylucas]

I've tried that input, when selectAll is set to true, the check box at the top of the list is always checked and cannot be unchecked. Plus clicking does not toggle the selection of all the items in the list. Likewise, when set to false, it remains unchecked and exhibits the same behavior. However I did notice that including the use of the selectAll input for the component, it does emit the onSelectAllChange event.

In the SelectAll function, you need to make the "selectAll" variable set to the "event.checked" value to control the display. If you want all the checkboxes to appear you'll also need to select those that are in the NgModel. Check out this updated stackblitz:
https://stackblitz.com/edit/angular-znfmqm-fk6kfd?file=src%2Fapp%2Fdemo%2Fmuilti-select-basic-demo.ts

[mertsincan]

Hi,
I tried to explain it in https://dev.to/mertsincan/handling-big-data-on-datatable-with-checkbox-selection-multiselect-4hgc
Best Regards

[jim-heath]

In the SelectAll function, you need to make the "selectAll" variable set to the "event.checked" value to control the display. If you want all the checkboxes to appear you'll also need to select those that are in the NgModel. Check out this updated stackblitz: https://stackblitz.com/edit/angular-znfmqm-fk6kfd?file=src%2Fapp%2Fdemo%2Fmuilti-select-basic-demo.ts

This almost addresses the problem, but in your Stackblitz version I noticed if you reduce the list of items shown by using the filter, then click the top-most check box, it still selects all items in the list. The previous version of the MultiSelect component didn't work this way. It would only check the boxes of the visible items in the filtered list.

The MultiSelect component seems to have become more cumbersome to use. It didn't use to be necessary to write code to handle selecting all items in the list. Am I missing something here?

I see now in the component's documentation under the VirtualScroll section it makes use of the selectAll and onSelectAllChange which seems to imply this is necessary when working with large datasets to improve performance. This is similar to what @mertsincan describes in his post on DataTables that he mentioned.

[Programmercito]

i user the onselectallchange event but dont works too

[scurk1415]

Why do i as the consumer need to handle the selectAll logic? This needs to be handled by the component. If i click the selectAll checkbox i want all the options to be selected and the model to be updated.

[rosenthalj]

I created issue #14603 which is a partial duplicate of this issue. It only fixes the "onChange event is no longer being emitted" problem addressed in this issue

I created pull request #14604 which fixes the onChange event problem

[eironman]

I've just found this issue,. I see there is already a fix pending to be merged. Thanks @jim-heath and @rosenthalj

[ledangtruongdatdnvn]

Can I know when it will be merged and what version will fix this?

[ledangtruongdatdnvn]

I think you can use (ngModelChange) to handle the problem

[rosenthalj]

issue #14807 is the same issue

Just to reiterate:

I created issue #14603 which is a partial duplicate of this issue. It only fixes the "onChange event is no longer being emitted" problem addressed in this issue

I created pull request #14604 which fixes only the onChange event problem

[rosenthalj]

I created pull request #14826 which fixes this issue. PR #14826 supersedes PR #14604

[yunusyerli1]

Hi, I tried to explain it in https://dev.to/mertsincan/handling-big-data-on-datatable-with-checkbox-selection-multiselect-4hgc Best Regards

Thank you for your explanation but the documents should have this explanation too.

[mohd-sajid-oodles]

I've tried that input, when selectAll is set to true, the check box at the top of the list is always checked and cannot be unchecked. Plus clicking does not toggle the selection of all the items in the list. Likewise, when set to false, it remains unchecked and exhibits the same behavior. However I did notice that including the use of the selectAll input for the component, it does emit the onSelectAllChange event.

In the SelectAll function, you need to make the "selectAll" variable set to the "event.checked" value to control the display. If you want all the checkboxes to appear you'll also need to select those that are in the NgModel. Check out this updated stackblitz: https://stackblitz.com/edit/angular-znfmqm-fk6kfd?file=src%2Fapp%2Fdemo%2Fmuilti-select-basic-demo.ts

yes its works. Thanks