Merge pull request #7564 from IgniteUI/dkamburov/fix-7483-9.1.x

fix(auto-complete): unsubscribe, before subscribing again #7483

Author: ChronosSF

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts

@@ -592,6 +592,31 @@ describe('IgxAutocomplete', () => {
             UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
             expect(fixture.componentInstance.townSelected).toBe('s');
         }));
+        it('Should trigger onItemSelected only once when the event is cancelled (issue #7483)', fakeAsync(() => {
+            spyOn(autocomplete.onItemSelected, 'emit').and.callThrough();
+
+            fixture.componentInstance.onItemSelected = (args) => { args.cancel = true; };
+            UIInteractions.setInputElementValue(input, 's', fixture);
+            fixture.detectChanges();
+            tick();
+            UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
+            expect(fixture.componentInstance.townSelected).toBe('s');
+            tick();
+            fixture.detectChanges();
+            expect(autocomplete.onItemSelected.emit).toHaveBeenCalledTimes(1);
+            expect(autocomplete.onItemSelected.emit).toHaveBeenCalledWith({ value: 'Sofia', cancel: true });
+
+            fixture.componentInstance.onItemSelected = (args) => { args.cancel = true; };
+            UIInteractions.setInputElementValue(input, 's', fixture);
+            fixture.detectChanges();
+            tick();
+            UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
+            expect(fixture.componentInstance.townSelected).toBe('s');
+            tick();
+            fixture.detectChanges();
+            expect(autocomplete.onItemSelected.emit).toHaveBeenCalledTimes(2);
+            expect(autocomplete.onItemSelected.emit).toHaveBeenCalledWith({ value: 'Sofia', cancel: true });
+        }));
         it('Should call onInput/open/close methods properly', fakeAsync(() => {
             let startsWith = 'g';
             spyOn(autocomplete, 'onInput').and.callThrough();

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -15,7 +15,7 @@ import {
 } from '@angular/core';
 import { NgModel, FormControlName } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 import { CancelableEventArgs, IBaseEventArgs } from '../../core/utils';
 import {
@@ -91,6 +91,9 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         excludePositionTarget: true
     };
 
+    /** @hidden  @internal */
+    private subscriptions: Subscription[] = [];
+
     protected id: string;
     protected dropDownOpened$ = new Subject<boolean>();
     protected get model() {
@@ -303,9 +306,18 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         // if no drop-down width is set, the drop-down will be as wide as the autocomplete input;
         this.target.width = this.target.width || (this.parentElement.clientWidth + 'px');
         this.target.open(this.settings);
-        this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select);
-        this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem);
-        this.target.children.changes.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.highlightFirstItem);
+
+        // unsubscribe from previous subscriptions, before creating new subscriptions.
+        this.unsubscribe();
+
+        this.subscriptions.push(this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select));
+        this.subscriptions.push(this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem));
+        this.subscriptions.push(this.target.children.changes.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.highlightFirstItem));
+    }
+
+    /** @hidden  @internal */
+    private unsubscribe() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
     }
 
     private get collapsed(): boolean {