feat(typeahead): allow custom class on window for modal issue (#3947)

Co-authored-by: Eric Liprandi <eliprandi@snapfish-llc.com>

src/typeahead/typeahead-window.ts

@@ -21,7 +21,12 @@ export interface ResultTemplateContext {
   selector: 'ngb-typeahead-window',
   exportAs: 'ngbTypeaheadWindow',
   encapsulation: ViewEncapsulation.None,
-  host: {'(mousedown)': '$event.preventDefault()', 'class': 'dropdown-menu show', 'role': 'listbox', '[id]': 'id'},
+  host: {
+    '(mousedown)': '$event.preventDefault()',
+    '[class]': '"dropdown-menu show" + (windowClass ? " " + windowClass : "")',
+    'role': 'listbox',
+    '[id]': 'id'
+  },
   template: `
     <ng-template #rt let-result="result" let-term="term" let-formatter="formatter">
       <ngb-highlight [result]="formatter(result)" [term]="term"></ngb-highlight>
@@ -73,6 +78,11 @@ export class NgbTypeaheadWindow implements OnInit {
    */
   @Input() resultTemplate: TemplateRef<ResultTemplateContext>;
 
+  /**
+  * A custom class to append to the typeahead window
+  */
+  @Input() windowClass: string;
+
   /**
    * Event raised when user selects a particular result row
    */

src/typeahead/typeahead.spec.ts

@@ -439,6 +439,33 @@ describe('ngb-typeahead', () => {
          tick(250);
          expectWindowResults(compiled, ['+one', 'one more']);
        }));
+
+    it('should apply additional class when specified', () => {
+      const fixture =
+          createTestComponent(`<input type="text" [(ngModel)]="model" [ngbTypeahead]="find" windowClass="test"/>`);
+      const compiled = fixture.nativeElement;
+
+      // the results of the code below are already tested above
+      changeInput(compiled, 'one');
+      fixture.detectChanges();
+
+      const win = getWindow(compiled);
+      expect(win.classList).toContain('test');
+    });
+
+    it('should apply additional classes when specified', () => {
+      const fixture = createTestComponent(
+          `<input type="text" [(ngModel)]="model" [ngbTypeahead]="find" windowClass="test other"/>`);
+      const compiled = fixture.nativeElement;
+
+      // the results of the code below are already tested above
+      changeInput(compiled, 'one');
+      fixture.detectChanges();
+
+      const win = getWindow(compiled);
+      expect(win.classList).toContain('test');
+      expect(win.classList).toContain('other');
+    });
   });
 
   describe('with async typeahead function', () => {

src/typeahead/typeahead.ts

@@ -170,6 +170,18 @@ export class NgbTypeahead implements ControlValueAccessor,
    */
   @Input() placement: PlacementArray = 'bottom-left';
 
+  /**
+  * A custom class to append to the typeahead window
+  *
+  * Accepts a string containing one or more CSS classes to be applied on the `ngb-typeahead-window`.
+  *
+  * This can be used to provide instance-specific styling. It was originally impelemented to allow overriding
+  * the `z-index` of the `ngb-typeahead-window` when using it inside a modal window.
+  *
+  * @since 8.1.0
+  */
+  @Input() windowClass: string;
+
   /**
    * An event emitted right before an item is selected from the result list.
    *
@@ -304,6 +316,7 @@ export class NgbTypeahead implements ControlValueAccessor,
       this._windowRef.instance.id = this.popupId;
       this._windowRef.instance.selectEvent.subscribe((result: any) => this._selectResultClosePopup(result));
       this._windowRef.instance.activeChangeEvent.subscribe((activeId: string) => this.activeDescendant = activeId);
+      this._windowRef.instance.windowClass = this.windowClass;
 
       if (this.container === 'body') {
         this._document.querySelector(this.container).appendChild(this._windowRef.location.nativeElement);