Select box with scroll jumps back to top in IE on scope update

[dgieselaar]

When using a select box with a set of options long enough to cause a scrollbar to appear, the vertical scroll is reset to 0 every time the scope updates. Confirmed in IE8-10. The JSFiddle is here:

http://jsfiddle.net/Xpw4b/4/

[sompylasar]

The scroll position actually jumps to the currently selected element.

I've debugged this, the cause is that in ngOptionsDirective the selected property is being unnessesarily updated.
The watch comparison that should check if the property value differs from the DOM value is reading from a jQuery object, not the <option> DOM element itself:

                if (existingOption.element.selected !== option.selected) {
                  lastElement.prop('selected', (existingOption.selected = option.selected));
                }

This leads to unnessesary updates on each digest and should be fixed as follows:

                if (existingOption.element[0].selected !== option.selected) {
                  lastElement.prop('selected', (existingOption.selected = option.selected));
                }

This code fragment executes in every browser, not only IE, but other ones seem to keep the scroll position and not scroll the newly selected element into view.

[tomauty]

Could you make that fix a pull request? I'm having this issue in firefox as well and would really rather not fork angular just to fix a weird select bug.

[sompylasar]

@tomauty Sorry but I haven't got a fork and signed a CLA yet. And some unit tests for this case should be written. So there is more work than I'm currently able to contribute.

[appveyor]

I can confirm this problem exists. It could be reproduced on Chrome.

The following fix worked for us (the fix provided above didn't work, but thank you for the clue!):

// reuse elements
lastElement = existingOption.element;
if (existingOption.label !== option.label && existingOption.id !== option.id) {
    lastElement.text(existingOption.label = option.label);
    lastElement.val(existingOption.id = option.id);
    lastElement.prop('selected', (existingOption.selected = option.selected));
}

[wesleycho]

Just a note, I've come upon this bug today in Firefox (but not IE) with Angular 1.2.9 and jQuery 1.8.3.

This bug disappears when you comment out this line in the select directive, which seems to suggest some weirdness here.

Edit: On further investigation, replacing lastElement.prop('selected', (existingOption.selected = option.selected)); with lastElement[0].selected = existingOption.selected = option.selected also causes the same jank in Firefox.

Edit 2: The fix is to nest the select element inside a form element - this is a Firefox specific bug.

Edit 3: This is however still present if the value is "" for the selected option.

[JohnDoee]

I tested some more stuff and it seems like Firefox behaviour is different than that of Chrome and IE.

See this fiddle for your own testing pleasure: http://jsfiddle.net/hXa9G/6/

Firefox selects when you're just hovering over a different option, while others seem to change it when it is ACTUALLY changed.

[Narretz]

I tested this with latest beta, and the bug is gone in IE11 (which showed the same buggy behavior): http://jsfiddle.net/Xpw4b/14/ However, there seems to be a different bug showing, because the first time you make a selection, the model is updated correctly but the selected option resets to the first option.

[IgorMinar]

@JohnDoee that's a browser (FF) bug. there is an issue for that on the FF issue tracker.

@Narretz I'm suspecting that all of these issues are resolved now thanks to fixes we made in the recent weeks. I'll test this.

[IgorMinar]

tested with http://jsfiddle.net/Xpw4b/16/

the issue is fixed in rc2 or before.