fix(select): fix memory leak in IgxSelectionAPIService (#13941)

Author: teodosiah

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1012,7 +1012,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         this.destroy$.next();
         this.destroy$.complete();
         this.comboAPI.clear();
-        this.selectionService.clear(this.id);
+        this.selectionService.delete(this.id);
     }
 
     /**

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -88,9 +88,9 @@ describe('igxCombo', () => {
         const elementRef = { nativeElement: null };
         const mockSelection: {
             [key: string]: jasmine.Spy;
-        } = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'add_items', 'select_items']);
+        } = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'add_items', 'select_items', 'delete']);
         const mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck', 'detectChanges']);
-        const mockComboService = jasmine.createSpyObj('IgxComboAPIService', ['register']);
+        const mockComboService = jasmine.createSpyObj('IgxComboAPIService', ['register', 'clear']);
         const mockNgControl = jasmine.createSpyObj('NgControl', ['registerOnChangeCb', 'registerOnTouchedCb']);
         const mockInjector = jasmine.createSpyObj('Injector', {
             get: mockNgControl
@@ -789,6 +789,13 @@ describe('igxCombo', () => {
             expect([...selectionService.get(combo.id)][1]).toBe(subParams.newValue);
             sub.unsubscribe();
         }));
+        it('should delete the selection on destroy', () => {
+            combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService,
+                mockIconService, null, null, mockInjector);
+            combo.ngOnDestroy();
+            expect(mockComboService.clear).toHaveBeenCalled();
+            expect(mockSelection.delete).toHaveBeenCalled();
+        });
     });
 
     describe('Combo feature tests: ', () => {

projects/igniteui-angular/src/lib/core/selection.ts

@@ -42,6 +42,14 @@ export class IgxSelectionAPIService {
         this.selection.set(componentID, this.get_empty());
     }
 
+    /**
+     * Removes selection for a component.
+     * @param componentID
+     */
+    public delete(componentID: string) {
+        this.selection.delete(componentID);
+    }
+
     /**
      * Get current component selection length.
      *

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -46,7 +46,7 @@ describe('IgxDropDown ', () => {
             { value: 'Item5', index: 5 } as IgxDropDownItemComponent];
         const mockSelection: {
             [key: string]: jasmine.Spy;
-        } = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'add_items', 'select_items']);
+        } = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'add_items', 'select_items', 'delete']);
         const mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck', 'detectChanges']);
         mockSelection.get.and.returnValue(new Set([]));
         const mockForOf = jasmine.createSpyObj('IgxForOfDirective', ['totalItemCount']);
@@ -181,6 +181,13 @@ describe('IgxDropDown ', () => {
             dropdown.toggle();
             expect(dropdown.close).toHaveBeenCalledTimes(1);
         });
+        it('should remove selection on destroy', () => {
+            const selectionService = new IgxSelectionAPIService();
+            const selectionDeleteSpy = spyOn(selectionService, 'delete');
+            dropdown = new IgxDropDownComponent({ nativeElement: null }, mockCdr, selectionService, null);
+            dropdown.ngOnDestroy();
+            expect(selectionDeleteSpy).toHaveBeenCalled();
+        });
     });
     describe('User interaction tests', () => {
         describe('Selection & key navigation', () => {

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -406,8 +406,8 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
     public ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.complete();
-        this.selection.clear(this.id);
-        this.selection.clear(`${this.id}-active`);
+        this.selection.delete(this.id);
+        this.selection.delete(`${this.id}-active`);
     }
 
     /** @hidden @internal */

projects/igniteui-angular/src/lib/select/select.component.spec.ts

@@ -2675,7 +2675,7 @@ describe('igxSelect', () => {
 describe('igxSelect ControlValueAccessor Unit', () => {
     let select: IgxSelectComponent;
     it('Should correctly implement interface methods', () => {
-        const mockSelection = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'clear', 'first_item']);
+        const mockSelection = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'clear', 'delete', 'first_item']);
         const mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']);
         const mockNgControl = jasmine.createSpyObj('NgControl', ['registerOnChangeCb', 'registerOnTouchedCb']);
         const mockInjector = jasmine.createSpyObj('Injector', {
@@ -2716,6 +2716,10 @@ describe('igxSelect ControlValueAccessor Unit', () => {
         spyOnProperty(select, 'collapsed').and.returnValue(true);
         select.onBlur();
         expect(mockNgControl.registerOnTouchedCb).toHaveBeenCalledTimes(2);
+
+        // destroy
+        select.ngOnDestroy();
+        expect(mockSelection.delete).toHaveBeenCalled();
     });
 
     it('Should correctly handle ngControl validity', () => {

projects/igniteui-angular/src/lib/select/select.component.ts

@@ -539,15 +539,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
         }
     }
 
-    /**
-     * @hidden @internal
-     */
-    public override ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.complete();
-        this.selection.clear(this.id);
-    }
-
     /**
      * @hidden @internal
      * Prevent input blur - closing the items container on Header/Footer Template click.

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -72,9 +72,9 @@ describe('IgxSimpleCombo', () => {
         const elementRef = { nativeElement: null };
         const mockSelection: {
             [key: string]: jasmine.Spy;
-        } = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'add_items', 'select_items']);
+        } = jasmine.createSpyObj('IgxSelectionAPIService', ['get', 'set', 'add_items', 'select_items', 'delete']);
         const mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['markForCheck', 'detectChanges']);
-        const mockComboService = jasmine.createSpyObj('IgxComboAPIService', ['register']);
+        const mockComboService = jasmine.createSpyObj('IgxComboAPIService', ['register', 'clear']);
         const mockNgControl = jasmine.createSpyObj('NgControl', ['registerOnChangeCb', 'registerOnTouchedCb']);
         const mockInjector = jasmine.createSpyObj('Injector', {
             get: mockNgControl
@@ -429,6 +429,17 @@ describe('IgxSimpleCombo', () => {
             combo.handleClear(spyObj);
             expect(combo.value).toEqual(item[0]);
         });
+
+        it('should delete the selection on destroy', () => {
+            const selectionService = new IgxSelectionAPIService();
+            const comboClearSpy = spyOn(mockComboService, 'clear');
+            const selectionDeleteSpy = spyOn(selectionService, 'delete');
+            combo = new IgxSimpleComboComponent(elementRef, mockCdr, selectionService, mockComboService,
+                mockIconService, platformUtil, null, null, mockInjector);
+            combo.ngOnDestroy();
+            expect(comboClearSpy).toHaveBeenCalled();
+            expect(selectionDeleteSpy).toHaveBeenCalled();
+        });
     });
 
     describe('Initialization and rendering tests: ', () => {