fix(typeahead): don't close dropdown on typeahead input click

Closes #1853 Closes #1989
ng-bootstrap · Nov 24, 2017 · fa9c080 · fa9c080
1 parent 9ad8f43
commit fa9c080
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/typeahead/typeahead.spec.ts b/src/typeahead/typeahead.spec.ts
@@ -182,6 +182,18 @@ describe('ngb-typeahead', () => {
       expect(getWindow(compiled)).toBeNull();
     });
 
+    it('should not be closed on input click', () => {
+      const fixture = createTestComponent(`<input type="text" [ngbTypeahead]="find"/>`);
+      const compiled = fixture.nativeElement;
+
+      changeInput(compiled, 'one');
+      fixture.detectChanges();
+      expect(getWindow(compiled)).not.toBeNull();
+
+      getNativeInput(compiled).click();
+      expect(getWindow(compiled)).not.toBeNull();
+    });
+
     it('should be closed when ESC is pressed', () => {
       const fixture = createTestComponent(`<input type="text" [ngbTypeahead]="find"/>`);
       const compiled = fixture.nativeElement;

diff --git a/src/typeahead/typeahead.ts b/src/typeahead/typeahead.ts
@@ -69,7 +69,7 @@ let nextWindowId = 0;
   host: {
     '(blur)': 'handleBlur()',
     '[class.open]': 'isPopupOpen()',
-    '(document:click)': 'dismissPopup()',
+    '(document:click)': 'onDocumentClick($event)',
     '(keydown)': 'handleKeyDown($event)',
     'autocomplete': 'off',
     'autocapitalize': 'off',
@@ -214,6 +214,12 @@ export class NgbTypeahead implements ControlValueAccessor,
     this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
   }
 
+  onDocumentClick(event) {
+    if (event.target !== this._elementRef.nativeElement) {
+      this.dismissPopup();
+    }
+  }
+
   /**
    * Dismisses typeahead popup window
    */