ngx-bootstrap typehead got auto focused on internet explorer 11

Question

I am using ngx-bootstrap typehead with angular 6 reactive form control. It works fine on all browser except internet explorer 11. Whenever without selection of option of typehead suggestion list I click outside the focus once again set on the typehead control. You can see same problem at

https://valor-software.com/ngx-bootstrap/#/typeahead#reactive-forms

Here I have identified same problem for reactive forms.

Please let me know, if anyone have any option for this.

Thanks, Amol Rajhans.

Answer 1

I came across the same behavior in IE and created a quick workaround.

import { Directive, Input } from '@angular/core';
import { TypeaheadDirective } from 'ngx-bootstrap';
const isIE = navigator.userAgent.indexOf('MSIE')!==-1 || navigator.appVersion.indexOf('Trident/') > -1;


@Directive({selector: '[typeaheadIeFix]', exportAs: 'bs-typeahead'})
export class TypeaheadIeFixDirective extends TypeaheadDirective {
  private ie_init:boolean = false;
  @Input('typeaheadIeFix') typeahead: any;
  /**
   * when ngModel or formControl is init'ed, it seems to update input value triggering an 'input' event in IE.
   * that 'input' event then causes typeahead directive to focus on the bound input and even open its suggestion list if possible. 
   */
  onInput (e) {
    if (isIE && !this.ie_init) {
      this.ie_init = true;
      return;
    }
    super.onInput(e);
  }
}