为什么我的数据列表在Chrome中显示不正确？

Question

在我们在Angular2中构建的Web应用程序的登录页面上，在Chrome版本55.0.2883.87 m中，数据列表显示奇怪的行为。

这发生在第一个事件触发时，因此如果您开始输入，它将在第一个keydown事件上，并且列表将继续执行以下事件。它在点击和焦点上也是如此。数据列表在Edge，Opera和Firefox中显示。我的所有合并该分支的同事都没有遇到过这个问题，这就是为什么我认为这可能是一个浏览器问题。

您可以在此处看到第一个和第二个事件之间的区别。

HTML：

<input list="user-name" type="text" class="form-control" placeholder="{{ 'SIGN.USERNAME' | translate }}" required autofocus [(ngModel)]="localUser.username">
<input type="password" class="form-control" placeholder="{{ 'SIGN.PASSWORD' | translate }}" required [(ngModel)]="localUser.password">
<button class="btn btn-lg btn-primary btn-block btn-color" (click)="login();" id="login-button" [ngClass]="{'login-error': loginFailed}">
    {{ loginText }}
</button>

<datalist id="user-name">
    <option value={{user}} *ngFor="let user of pastLoggedInUsers">
</datalist>

任何人都可以了解这是否是浏览器错误，或者我们可以在代码中做些什么来解决问题？