ngx-bootstrap typeahead 自动关注 Internet Explorer 11答案

【问题标题】：ngx-bootstrap typehead got auto focused on internet explorer 11ngx-bootstrap typeahead 自动关注 Internet Explorer 11
【发布时间】：2019-09-10 09:15:27
【问题描述】：

我正在使用 ngx-bootstrap 字体头和 Angular 6 响应式表单控件。它在除 Internet Explorer 11 之外的所有浏览器上都可以正常工作。每当没有选择打字头建议列表选项时，我再次单击在打字头控件上设置的焦点之外。你可以在

看到同样的问题

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

在这里，我发现反应式表单存在同样的问题。

如果有人对此有任何选择，请告诉我。

谢谢，阿莫尔·拉詹斯。

【问题讨论】：

请详细说明您的问题，我已经在我的机器上测试了代码，无法重现您的问题？但是，我需要点击两次才能选择选项，你遇到这个问题吗？你能像Minimal, Complete, and Verifiable example一样发布足够的代码来重现问题吗？
感谢您的回复。来自valor-software.com/ngx-bootstrap/#/typeahead#reactive-forms URL，请查看 Internet Explorer 11 上的 Reative 表单示例。您会发现我的问题。

标签： internet-explorer angular-reactive-forms ngx-bootstrap typehead

【解决方案1】：

我在 IE 中遇到了相同的行为并创建了一个快速解决方法。

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);
  }
}

【讨论】：