fix(igx-autocomplete): don't close DD on input/group click #3585

IgniteUI · Feb 11, 2019 · 8820545 · 8820545
1 parent 4e26f79
commit 8820545
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
@@ -149,6 +149,26 @@ describe('IgxAutocomplete', () => {
             expect(dropDown.collapsed).toBeTruthy();
             expect(autocomplete.open).toHaveBeenCalledTimes(1);
         }));
+        it('Should not close the dropdown when clicked on a input or the group', fakeAsync(() => {
+            UIInteractions.sendInput(input, 's', fixture);
+            fixture.detectChanges();
+            expect(dropDown.collapsed).toBeFalsy();
+
+            input.nativeElement.click();
+            tick();
+            fixture.detectChanges();
+            expect(dropDown.collapsed).toBeFalsy();
+
+            group.element.nativeElement.click();
+            tick();
+            fixture.detectChanges();
+            expect(dropDown.collapsed).toBeFalsy();
+
+            document.body.click();
+            tick();
+            fixture.detectChanges();
+            expect(dropDown.collapsed).toBeTruthy();
+        }));
         it('Should select item and close dropdown with ENTER and do not close it with SPACE key', fakeAsync(() => {
             let startsWith = 's';
             let filteredTowns = fixture.componentInstance.filterTowns(startsWith);

diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
@@ -317,6 +317,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         this.dropdown.width = this.parentElement.clientWidth + 'px';
         this.dropdown.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select);
         this.dropdown.onOpened.pipe(first()).subscribe(() => { this.highlightFirstItem(); });
+        this.dropdown.onClosing.pipe().subscribe((args) => { this.onDropDownClosing(args); });
         this.dropdown.children.changes.pipe(takeUntil(this.dropDownOpened$)).subscribe(() => this.highlightFirstItem());
     }
 
@@ -364,6 +365,12 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         setTimeout(() => { this.dropdown.toggleDirective.reposition(); });
     }
 
+    private onDropDownClosing(args) {
+        if (args.event && this.parentElement.contains(args.event.target)) {
+            args.cancel = true;
+        }
+    }
+
     /**
      * @hidden
      */