why is my datalist displaying incorrectly in Chrome?

Question

On the login page of a web application that we are building in Angular2, in Chrome Version 55.0.2883.87 m, the datalist is displaying odd behaviour.

This happens on the first event fire, so if you start typing, it will be on the first keydown event, and the list will move on the following event. It does the same on click and focus. The datalist displays as it should in Edge, Opera, and Firefox. My colleagues who have all merged that branch have not encountered the issue at all, which is why I believe it may be a browser issue.

You can see the difference between the first and second events here.

The 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>

Can anyone shed some light as to whether this is a browser bug, or if there is something we can do in code to resolve the issue?