iPhone: ng-options selects next element first time

[AlphaGit]

Description: a select with ng-options that generates a empty first element will select the element next to the one that the user selected.

Angular Version(s): Tested on 1.2.2. Doesn't seem to be a regression since I was able to verify the same issue in 1.1.1 and 1.2.0-rc3.

Browsers and Operating System: iOS7 (iPhone), tested with Safari and Chrome, latest versions.

Reproducing the error:

1. Browse this URL: http://jsfiddle.net/MTfRD/537/embedded/result/
2. Select "Feature" (first element)
3. Observe that the selected value in the select box is now "Bug" (second element).

Workaround:
http://jsfiddle.net/MTfRD/3/embedded/result/
Has the exact same configuration as the example that reproduces the error, except that a first element is forced in the select box.

(Code adapted from: http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select)

Related issues: Not that I'm aware of. Investigating this I arrived to this issue, but I cannot tell if they are actually related or not.

[IgorMinar]

#1091 could be related

[IgorMinar]

very nice bug report. thanks!

[IgorMinar]

I triaged it for 1.2.x, if you'd like to send a pull request please do!

[v1bh0r]

I think the problem lies in the way we re-use option elements instead of creating new (most probably for performance reasons).

angular.js/src/ng/directive/select.js

Line 525 in 7aef2d5

// reuse elements

Here, the blank option gets labeled as "Feature" and "Feature" gets labelled as "Bug" and so on...
Since the user had clicked on the second element (initially labelled "Feature"), it seems like the Safari Mobile retains the original element as the selection which is now labelled as "Bug" and hence the bug.

Note: The model is getting updated properly. It is just only the label on the input which is wrong.

[AlphaGit]

Great point, @Vibhor86, I was trying to make sense of that logic myself but could not get to.

If that was the case, shouldn't lastElement[0].selected !== option.selected evaluate to true and so the selected element be re-set in the browser?

[clkao]

This seems to be an genuine bug in mobile safari, because the resulting dom is consistent as the model, ie the first option does have selected="selected" on it, and the scope is updated accordingly. But the view is different from the dom. I was able to correct the active select by calling another .prop('selected', true) on the actual option.

Here's a smaller test case and dom output: http://jsfiddle.net/ySmah/16/, note the differences between dom and display

[caitp]

@clkao can you file a bug on webkit re: this? it might already be fixed, or they might tell us were doing something wrong

[clkao]

sure. I am working on failed test case: clkao@ab83148

but the way I use .prop to emulate selecting options is not quite working. Can someone help on that?

[jtangelder]

I am having this issue too. An other workaround is by adding a 'please select' option to the select. I don't like the workaround that needs some js and this doesn't change the behavior of the app.

<select ng-options="...">
   <option value="">- Please select -</option>
</select>

http://jsfiddle.net/MTfRD/661/

[clkao]

Cleaner workaround:

<select ng-options="..." ng-model="foo">
  <option value="" ng-if="!foo"></option>
</select>

[jtangelder]

nice! i thought it would reintroduce the bug, but it aint :-)
(ps, typo, ng-mode -> ng-model)

[clkao]

@jtangelder typo fixed ;)