Clears the previous selected items for selectedItems output upon datasource update

[haseebahmad95]

I am fetching new items when scroll reaches the end. So the issue I am facing is when I select the items with drag and it reaches across the previous data and new data, the previously selected data clears and the selection from new data remains. It should maintain the selection state from previous selection. Following is the code snippet.

Kindly respond ASAP.

<dts-select-container #tableContainer [(selectedItems)]="selectedItems" (select)="someMethod($event)">
  <ul class="table_container file_icons" id="content_dropdown">
    <li [dtsSelectItem]="record" *ngFor="let record of records"></li>
  </ul>
</dts-select-container>

I have also tried using i = index

<dts-select-container #tableContainer [(selectedItems)]="selectedItems" (select)="someMethod($event)">
  <ul class="table_container file_icons" id="content_dropdown">
    <li [dtsSelectItem]="i" *ngFor="let record of records; let i = index"></li>
  </ul>
</dts-select-container>

[d3lm]

Hey there! Thanks for your feedback and reporting your issue. Can you please create a StackBlitz for this? It's important to have clear reproducable. Also, what version do you use?

[haseebahmad95]

Hi, Here is the stackblitz link. You can reproduce it here by start dragging from document 10 to the end you will see the document 10 to document 20 will no appear in the selection list and next 20 documents will be selected. To reproduce it again please refresh the browser window. https://stackblitz.com/edit/github-4bikex

[d3lm]

I looked at your blitz but I am not sure I understand the problem. Have a look at the following gif:

I am selecting "Item 10" and then start scrolling down which will trigger more items to be loaded, and while this happens I continue to scroll down and select all items from 10 to 39.

Do you mind elaborating on the exact issue you're facing?

Here's the blitz I used. I also changed the generation of items and also updated the template cause it was throwing errors because of a circular json structure.

[haseebahmad95]

Thanks for the responding.

Actually the issue is when we start dragging and in between the dragging the data is updated then previously selected items vanished and newly selected items came in selected items you can see below in the gif. I have started selection from item 10 to item 39 but in the selected items it is showing from item 17 onwards.

[haseebahmad95]

Hi @d3lm , Any update?

[d3lm]

This seems to be a bug. Currently I do not have the time to look at it. A PR and contribution is more than welcome.

[TheGlockZentix]

@haseebahmad95 Did you manage to find a way around this problem?

[haseebahmad95]

Hi @TheGlockZentix, This https://github.com/d3lm/ngx-drag-to-select/pull/142 PR will actually fix this issue.

For immediate fix replace line no 353 with following two lines in file select-container.component.ts

const newListValues = newList.map((item) => item.value);
const removedItems = selectedItems.filter((item) => !newListValues.includes(item));

[TheGlockZentix]

Hi @TheGlockZentix, This #142 PR will actually fix this issue.

For immediate fix replace line no 353 with following two lines in file select-container.component.ts

const newListValues = newList.map((item) => item.value);
const removedItems = selectedItems.filter((item) => !newListValues.includes(item));

Yeah I saw that right after I posted the comment! Thanks for the reply though! :)