This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
<select> broken: model/view out of sync #7544
Closed
Description
I'm seeing a <select> display one value but have a model with a different value. I think it has something to do with the initial "empty" <option> when the model is null.
Here's some minimal reproducing code (there's also a fiddle below):
<!doctype html>
<html>
<body ng-app="test" ng-controller="TestCtrl as ctrl">
{{ ctrl.selected }}
<select ng-model="ctrl.selected.id" ng-options="thing.id as thing.name for thing in ctrl.things|orderBy:'name'" autofocus></select>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script>
var app = angular.module('test', []);
app.controller('TestCtrl', function() {
var ctrl = this;
ctrl.selected = {};
ctrl.things = [
{name: 'Health', id: "health.id"},
{name: 'Haircuts', id: "haircuts.id"},
];
return ctrl;
});
</script>
</body>
</html>To duplicate with the fiddle below:
- click somewhere in the rendered pane
- then press tab to focus the
<select> - then quickly type
he - Notice that the select is showing "Health" but the model is for "Haircuts"
I can duplicate this bug on 1.2.10 and 1.2.16 using Chrome (haven't tested other browsers)