Cannot deselect items on Angular 9 + Ivy

[sonicfran86]

Hi,

I'm using Angular 9 with Ivy enabled and ngx-drag-to-select 4.0.0.

When I select 2 or more items (either dragging or ctrl + click) I cannot deselect them anymore.
However, if I disable Ivy it works fine again

[d3lm]

Hey, thanks for reporting this issue. Please fork the StackBlitz, and re-create the issue. On the demo page, which has Ivy enabled, it works just fine. That said, the demo is using the latest version of Angular (10.x).

[d3lm]

[sonicfran86]

thank you for your quick response @d3lm.

I was able to reply the issue in this fork: https://ngx-drag-to-select-2kmfrw.stackblitz.io

The problem happens when I add 2 nested *ngIf directives inside the items loop, while one is depending on selectedItems binding. This is the piece of html that I added:

<mat-card *ngFor="let document of documents" [dtsSelectItem]="document">
	{{ document.name }}
	<div *ngIf="selected.length > 1">
             <div *ngIf="true"></div>
        </div>
</mat-card>

[d3lm]

Yea ok, so in general, you don't wanna do this. The reason for this is an ngIf inside the select items change their bounding boxes. Generally this is not a big deal but requires you do manually update the bounding boxes in those cases. The library is not responsible for attaching resize listeners for each item, because that has quite some performance impact. Basically, while you're dragging, those conditional elements are shown / hidden and that changes their bounding boxes, and consequentially dragging breaks as well as toggling elements. Check the update() method on the select container.