<select> broken: model/view out of sync #7544

iffy · 2014-05-22T04:04:01Z

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"

http://jsfiddle.net/VRE2L/

I can duplicate this bug on 1.2.10 and 1.2.16 using Chrome (haven't tested other browsers)

The text was updated successfully, but these errors were encountered:

iffy · 2014-05-22T17:29:34Z

If I include track by thing.id in ng-options then the model is correct (after pressing tab then typing he) but the view doesn't update at all :(

Here's a fiddle:

http://jsfiddle.net/AgNUM/

iffy · 2014-05-22T18:16:30Z

The problem (or maybe symptom) is that the change handler is not being called even though the value is changing. Using this patch (based on 1.2.16):

diff --git a/src/ng/directive/select.js b/src/ng/directive/select.js
index 628d217..fe9b61a 100644
--- a/src/ng/directive/select.js
+++ b/src/ng/directive/select.js
@@ -342,7 +342,14 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
         // clear contents, we'll add what's needed based on the model
         selectElement.empty();

+        selectElement.on('keydown', function(ev) {
+          console.log('keydown', ev.keyCode, selectElement.val());
+        });
+        selectElement.on('keyup', function(ev) {
+          console.log('keyup', ev.keyCode, selectElement.val());
+        });
         selectElement.on('change', function() {
+          console.log('change');
           scope.$apply(function() {
             var optionGroup,
                 collection = valuesFn(scope) || [],

I see the following in the console when I type he:

keydown 72 ?
change
keyup 72 0
keydown 69 0
keyup 69 1

So you can see that the val (as returned by .val()) does indeed change when pressing e but the change handler is not called.

btford · 2014-05-22T20:17:59Z

I can confirm that this is an issue in Chrome.

pkozlowski-opensource · 2014-05-22T20:26:02Z

Ha, actually I was also looking at this one :-) From my playing with the issue it looks like the problem goes away if the orderBy filter is not used: http://jsfiddle.net/y9UxU/

Or maybe I'm just not clicking fast enough....

iffy · 2014-05-22T21:41:18Z

@pkozlowski-opensource The problem is still there even without the orderBy. In your fiddle if you:

Click the rendered pane
Press tab (no mouse)
Type ha
You will see it display "Haircuts" in the dropdown and the model is "health.id"

Afaict, if you use the mouse to select things there is no problem.

Edit: And I should re-point out that using track by changes the behavior but introduces other buggy behavior.

iffy · 2014-05-22T21:48:47Z

In Firefox (29.0.1) it behaves differently (there's never a discrepancy between model and view) because the change event isn't triggered until blur.

IgorMinar · 2014-10-02T18:09:41Z

we should take a look at this after #6564 is fixed

gkalpak · 2014-10-02T18:48:40Z

This might be realated to #9134 (and a bunch similar issues), which is related to a Chrome bug - has been reported here.

jeffbcross · 2014-10-03T23:44:03Z

Created a plnkr from the original fiddle (easier for me): http://plnkr.co/edit/vu1buCX8Hb6ePQm2kDLF?p=preview

I was able to see that the change event is firing in Chrome, so this seems like an issue in Angular.

tbosch · 2014-10-04T00:21:03Z

@jeffbcross I discussed this with @IgorMinar, have some ideas about the cause and an idea for the solution. Will take this from here...

gkalpak · 2014-10-04T08:34:06Z

@jeffbcross, I don't think it's an issue with Angular, as it also happens without Angular: plunkr
(originally posted here: #9134 (comment))

And yes, the change event is not fired when you remove a preceeding <option>.

This seems like a browser bug to me, but the question is: Should we account for that and make Angular not step into the bug, or should we wait for the bug to get fixed ?

(/cc @tbosch )

jeffbcross · 2014-10-05T04:07:57Z

yes sorry I was too hasty :)

Narretz · 2015-08-13T18:53:36Z

Closing as dupe of #9134

iffy changed the title ~~select model/view out of sync~~ <select> broken: model/view out of sync May 22, 2014

btford added type: bug labels May 22, 2014

btford added this to the 1.3.0 milestone May 22, 2014

btford added severity: broken expected use labels May 22, 2014

btford self-assigned this May 22, 2014

Narretz added component: forms and removed component: misc core labels Jun 25, 2014

btford removed the gh: issue label Aug 20, 2014

IgorMinar modified the milestones: 1.3.0-rc.5, 1.3.0 Oct 2, 2014

IgorMinar unassigned btford Oct 2, 2014

tbosch self-assigned this Oct 3, 2014

btford modified the milestones: 1.3.0-rc.5, 1.3.0-rc.6 Oct 8, 2014

IgorMinar added the post-1.3.0 label Oct 13, 2014

IgorMinar modified the milestones: 1.3.0-rc.6, 1.3.0 Oct 13, 2014

tbosch modified the milestones: 1.3.x, 1.3.1, Backlog Oct 15, 2014

tbosch removed their assignment Nov 7, 2014

SteveShaffer mentioned this issue Nov 26, 2014

<select> ng-options cannot "track by" a string when "orderBy" filter is used #10225

Closed

gkalpak mentioned this issue Nov 27, 2014

Handle the onChange event on ngOptions is insufficient #10233

Closed

Narretz closed this as completed Aug 13, 2015

Narretz added the resolution: duplicate label Aug 13, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

<select> broken: model/view out of sync #7544

<select> broken: model/view out of sync #7544

iffy commented May 22, 2014

iffy commented May 22, 2014

iffy commented May 22, 2014

btford commented May 22, 2014

pkozlowski-opensource commented May 22, 2014

iffy commented May 22, 2014

iffy commented May 22, 2014

IgorMinar commented Oct 2, 2014

gkalpak commented Oct 2, 2014

jeffbcross commented Oct 3, 2014

tbosch commented Oct 4, 2014

gkalpak commented Oct 4, 2014

jeffbcross commented Oct 5, 2014

Narretz commented Aug 13, 2015

<select> broken: model/view out of sync #7544

<select> broken: model/view out of sync #7544

Comments

iffy commented May 22, 2014

iffy commented May 22, 2014

iffy commented May 22, 2014

btford commented May 22, 2014

pkozlowski-opensource commented May 22, 2014

iffy commented May 22, 2014

iffy commented May 22, 2014

IgorMinar commented Oct 2, 2014

gkalpak commented Oct 2, 2014

jeffbcross commented Oct 3, 2014

tbosch commented Oct 4, 2014

gkalpak commented Oct 4, 2014

jeffbcross commented Oct 5, 2014

Narretz commented Aug 13, 2015