Table Selection not cleared from table

[laurz94]

Describe the bug

When the table is in multi-select mode, there is no clear and easy way to clear the selection programmatically. The documentation says you just need to set the selected items array to [] in the component. However, the table UI does not unselect the values.

Environment

Any

Reproducer

https://stackblitz.com/edit/primeng-tableselection-demo-hsxykw

Angular version

"~16.2.12",

PrimeNG version

"~16.4.3"

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18 LTS

Browser(s)

Chrome and Edge, haven't tested in others.

Steps to reproduce the behavior

Scenario: The table has one or more rows selected. The user clicks the clear button to remove the table selection. The table component (wrapped in my component library)

• calls clear() and clearSelectionRange() on the table.
• Sets the table component's selected rows to undefined
• Emits the selection changed event with []

The component using the table from the component library receives the selection change event and sets its selected items array to the value sent on the event ([])

The user sees no visual change to the table; all rows appear to be still selected. Console logging the values shows the events are sending the correct values. Both the table and consuming components have no selected items.

The user clicks to select another row (just one), and the console logs show multiple rows selected.

Expected behavior

The table reflects the unselected rows. When selecting a row after clearing values, only selects the row that was clicked.

[yash-kh]

It took me a while to figure out this, had to dig into the code and finally found @laurz94 that you need to add "preventSelectionSetterPropagation" input to the p-table

Example:

<p-table [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" preventSelectionSetterPropagation [metaKeySelection]="metaKey" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
<p-table>

@cetincakiroglu This is my first contribution, feel free to assign me more basic issue I would like to contribute and learn.

[laurz94]

Thank you, @yash-kh, for looking into this issue for me. However, your solution did not fix the selection problem. After adding the directive you suggested, the clear button no longer works. I have updated my stackblitz so you see the behavior after adding the directive.

[Sinan997]

Hi, can you use the method below.

if (table.value && table.value.length > 0) {
  table.toggleRowsWithCheckbox(event, false);
}

[laurz94]

@Sinan997 Thank you for your response, but this will resolve the issue of the table visually showing rows as selected, but programmatically showing 0 rows selected (which is correct).

[Sinan997]

So, is your problem resolved?

[laurz94]

No, the problem I described is not resolved. The table visually displays more rows selected than are actually selected.

[Sinan997]

I am testing in this stackblitz app.

Making clear function as below works for me.

clear(event: any, table: Table): void {
  table.toggleRowsWithCheckbox(event, false);
}