Primeng: DataTable with PMultiSelect error in Chrome 62

[Borzenko]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see 

Current behavior
Multiselect unselectAll doesnt work

Expected behavior
Everything works.

Minimal reproduction of the problem with instructions
It problem also reproduces on your`s example

1. Have a p-datatable

<p-dataTable
  *ngIf="isFormReady"
  [value]="tableData"
  [paginator]="true"
  [rows]="'10'"
  [lazy]="true"
  (onLazyLoad)="onLazyLoad($event)"
  [totalRecords]="itemsCount"
  [rowsPerPageOptions]="[10, 20, 50]">
    <p-header>
        <div style="text-align:left">
            <p-multiSelect [options]="columnOptions" [(ngModel)]="selectedCols"></p-multiSelect>
        </div>
    </p-header>
    <p-column *ngFor="let col of selectedCols" sortable="custom" [field]="col.field" [header]="col.header" [styleClass]="col.styleClass">
     </p-column>
</p-dataTable>

1. Click on selectAll / unSelectAll checkbox on multiselect and get an error
   https://user-images.githubusercontent.com/11975401/31877089-d4e962e2-b7dd-11e7-971b-f865f71dc70f.png

DiscountsSummaryTableComponent.html:74 ERROR TypeError: Cannot read property 'remove' of undefined
    at _DuplicateMap.remove (core.es5.js:7498)
    at DefaultIterableDiffer._unlink (core.es5.js:7195)
    at DefaultIterableDiffer._remove (core.es5.js:7186)
    at DefaultIterableDiffer._mismatch (core.es5.js:6972)
    at DefaultIterableDiffer.check (core.es5.js:6867)
    at DefaultIterableDiffer.diff (core.es5.js:6838)
    at MultiSelect.ngDoCheck (multiselect.js:83)
    at checkAndUpdateDirectiveInline (core.es5.js:10851)
    at checkAndUpdateNodeInline (core.es5.js:12349)
    at checkAndUpdateNode (core.es5.js:12288)

Please tell us about your environment:
Reproduce on each platform (Ubuntu / Mac / Windows )

• Angular version: 4.3.X

• PrimeNG version: 4.2.X

• Browser: [Chrome 62]

• Language: [TypeScript 2.2]

[mniederkofler]

Same issue here. Issue occurs during unselect, also on single items.

[starlightknight]

Also having this issue. Tried updating to latest Angular (4.4.6) and PrimeNG (4.2.2) and it does not help. This issue makes the data-table basically unusable in Chrome

[cagataycivici]

Could not replicate but replaced that part causing the issue.

[starlightknight]

@cagataycivici 3b84cf7 does not seem to resolve this issue for me. I still get

ERROR TypeError: Cannot read property 'remove' of undefined
    at _DuplicateMap.webpackJsonp.../../../core/@angular/core.es5.js._DuplicateMap.remove (vendor.bundle.js:137059)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._unlink (vendor.bundle.js:136756)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._remove (vendor.bundle.js:136747)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer._mismatch (vendor.bundle.js:136533)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.check (vendor.bundle.js:136428)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.diff (vendor.bundle.js:136399)
    at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngDoCheck (vendor.bundle.js:99199)
    at checkAndUpdateDirectiveInline (vendor.bundle.js:140406)
    at checkAndUpdateNodeInline (vendor.bundle.js:141899)
    at checkAndUpdateNode (vendor.bundle.js:141838)
    at debugCheckAndUpdateNode (vendor.bundle.js:142699)
    at debugCheckDirectivesFn (vendor.bundle.js:142640)
    at Object.eval [as updateDirectives] (ng:///AppModule/ManageTasksComponent.ngfactory.js:424)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:142625)
    at checkAndUpdateView (vendor.bundle.js:141805)

Tried with 4.3.0-rc.1 which includes the referenced commit (after fixing the export issue with the build). I think the key to hitting this issue is the combination of the following options:

1) P-Multiselect for Column Toggle (as in the demo)
2) Checkboxes for Multi select (as in the demo)
3) Lazy Loading (as in the demo)

None of the demos have all three together though so the issue can't be reproduced in those.

[akankshaavhad]

Even I am getting the above issue. Also, I have the above combination of the options. Is there any solution or do anyone know the reason of the problem?

[ova2]

It works in other browsers, except Chrome. Reproducable in the showcase with Chrome https://www.primefaces.org/primeng/#/datatable/coltoggler

[niceilm]

In my case

this.columnOptions = JSON.parse(JSON.stringify(columnOptions));

then working...
but I don't know why it works...

[alienfreak]

Still getting the error here too, even after upgrade to PrimeNg v5.0.0-rc.0 & Angular v5. Still reproducible in the showcase https://www.primefaces.org/primeng/#/datatable/coltoggler as @ova2 mentioned.

[KentMercier]

Looks like colToggler broke after chrome made the latest update; thanks for attention to this issue

[atecey]

Also seeing this issue with Angular :5.0.0 and primeng 5.0.0 in Chrome only

[ova2]

I fixed it with an interceptor for property setter

 <p-header>
    Verträge
    <div style="float: right; cursor: pointer;" (click)="op.toggle($event)">
      <i class="fa fa-server column-picker"></i>Spalten wählen
    </div>
 </p-header>
  ...
 <p-column *ngFor="let col of selectedColValues"
     [field]="col.field" [header]="col.header" [sortable]="true">
     ...
 </p-column>

...

<p-overlayPanel #op [style]="{'width': '200px'}">
  <div *ngFor="let col of cols">
    <p-checkbox name="colgroup" [value]="col"
        [label]="col.header" [(ngModel)]="selectedColValues">
    </p-checkbox>
  </div>
</p-overlayPanel>

  cols: ColumnModel[];
  private _selectedColValues: ColumnModel[];

  set selectedColValues(values) {
    // intercept and sort
    this._selectedColValues = values;
    this._selectedColValues.sort((a, b) => {
      let idxa = this.cols.findIndex(function(element){return element.field === a.field});
      let idxb = this.cols.findIndex(function(element){return element.field === b.field});

      return idxa - idxb;
    });
  }

[LogicEveryWhere]

By the way.
Selection mechanism also affected.

In case you using [rowsPerPageOptions] in my case [25,50,75,100] set [rows] = 25

select all items and change pagination to 100 for example. Same error appears.

[tsesaihung]

I have the same problem. I have checked out the primeng demo project (version 4.3.0) for coltoggler and it works fine. The only difference is the dependent library defined in package.json is slighter different, especially the angular 4 library.

https://github.com/primefaces/primeng/blob/4.3.0/package.json

[parisgianluca]

Same problem here

[LogicEveryWhere]

Update chrome to 63 version. This related to chrome bug.
https://bugs.chromium.org/p/chromium/issues/detail?id=781218
Works for me

[parisgianluca]

Thank you, @LogicEveryWhere!