In the example below "X-Small" is initially the selected item in the dropdown. Once you click the "Sort" button and sort the array, "2X-Large" becomes the highlighted item in the dropdown but "X-Small" is displayed. I would expect that "X-Small" would be highlighted. After opening and closing the dropdown "2x-Large" becomes the selected item even if you don't select it. The same behavior does not happen with a simple select dropdown.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<form>
<div>
<p>T-shirt size:</p>
<kendo-dropdownlist [data]="listItems" [(ngModel)]="selectedShirt" name="shirtsize">
</kendo-dropdownlist>
</div>
<br/>
<div>
<select [(ngModel)]="selectedShirt" name="shirtsize2">
<option *ngFor="let d of listItems">{{d}}</option>
</select>
</div>
<br/>
<button (click)="sortArray()">Sort</button>
</form>
`
})
export class AppComponent implements OnInit {
public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
public selectedShirt: string;
ngOnInit(){
this.selectedShirt = this.listItems[0];
}
sortArray(){
this.listItems.sort((a, b) => a.localeCompare(b));
}
}