fix(lib): keep selection when selectable items change (#142)

d3lm · Dec 5, 2021 · 24514ca · 24514ca
1 parent 1ed14c7
commit 24514ca
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/projects/ngx-drag-to-select/src/lib/select-container.component.ts b/projects/ngx-drag-to-select/src/lib/select-container.component.ts
@@ -350,7 +350,8 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
       .subscribe(([items, selectedItems]: [QueryList<SelectItemDirective>, any[]]) => {
         const newList = items.toArray();
         this._selectableItems = newList;
-        const removedItems = selectedItems.filter((item) => !newList.includes(item.value));
+        const newValues = newList.map((item) => item.value);
+        const removedItems = selectedItems.filter((item) => !newValues.includes(item));
 
         if (removedItems.length) {
           removedItems.forEach((item) => this._removeItem(item, selectedItems));
@@ -614,7 +615,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
       success = true;
       selectedItems.splice(index, 1);
       this._selectedItems$.next(selectedItems);
-      this.itemDeselected.emit(item.value);
+      this.itemDeselected.emit(value);
     }
 
     return success;

diff --git a/projects/ngx-drag-to-select/src/lib/select-container.spec.ts b/projects/ngx-drag-to-select/src/lib/select-container.spec.ts
@@ -4,6 +4,7 @@ import { By } from '@angular/platform-browser';
 import { DragToSelectModule } from './drag-to-select.module';
 import { SelectContainerComponent } from './select-container.component';
 import { SelectItemDirective } from './select-item.directive';
+import { BehaviorSubject } from 'rxjs';
 
 function triggerDomEvent(eventType: string, target: HTMLElement | Element, eventData: object = {}): void {
   const event: Event = document.createEvent('Event');
@@ -24,9 +25,9 @@ interface SelectItemValue {
       (itemDeselected)="itemDeselected($event)"
       #selectContainer
     >
-      <span [dtsSelectItem]="{ id: 1 }" #selectItem="dtsSelectItem">Item #1</span>
-      <span [dtsSelectItem]="{ id: 2 }" #selectItem="dtsSelectItem">Item #2</span>
-      <span [dtsSelectItem]="{ id: 3 }" #selectItem="dtsSelectItem">Item #3</span>
+      <ng-container *ngIf="data$ | async as data">
+        <span *ngFor="let item of data" [dtsSelectItem]="item" #selectItem="dtsSelectItem">Item #{{ item.id }}</span>
+      </ng-container>
     </dts-select-container>
   `,
 })
@@ -39,6 +40,8 @@ class TestComponent {
 
   selectedItems = [];
 
+  data$ = new BehaviorSubject<SelectItemValue[]>([{ id: 1 }, { id: 2 }, { id: 3 }]);
+
   itemSelected(value: any) {}
   itemDeselected(value: any) {}
 
@@ -86,6 +89,25 @@ describe('SelectContainerComponent', () => {
     expect(fixture.componentInstance.selectItems.first.calculateBoundingClientRect).toHaveBeenCalled();
   });
 
+  it('should update its selection when selectable items change', (done) => {
+    selectContainerInstance.selectItems((item: SelectItemValue) => item.id === 1 || item.id === 2);
+
+    selectContainerInstance.itemDeselected.subscribe((item: SelectItemValue) => {
+      expect(item).toEqual({ id: 1 });
+    });
+
+    selectContainerInstance.select.subscribe((items) => {
+      expect(items).toEqual([{ id: 2 }]);
+      done();
+    });
+
+    const previousData = testComponent.data$.value;
+
+    testComponent.data$.next([previousData[1], previousData[2], { id: 4 }]);
+
+    fixture.detectChanges();
+  });
+
   describe('selectItems()', () => {
     it('should select items', (done) => {
       const ids = [1, 2];