multiple select always jumps back to lowest marked element #15477

ghost · 2016-12-08T12:08:06Z

Do you want to request a feature or report a bug?
Bug

What is the current behavior?

multiple select: In successively selecting one of the last and one of the first elements, the selector jumps back to the lowest selected element.
I think angular background magic bred this bug.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

example: https://plnkr.co/edit/8Cw3duixywJui0TYELKF?p=preview
It's only a minimal example, i build this in different cases but i can't post the original source code.
special look at the $interval(function() {}, 100);

What is the expected behavior?

the select works normally without jumping.

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

angularjs 1.5.6
Firefox / IE

Other information (e.g. stacktraces, related issues, suggestions how to fix)
sorry for my bad english, I'm from Germany.

with best regards
Sogmog

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

gkalpak · 2016-12-08T13:27:36Z

This also happens on Chrome btw.

Narretz · 2016-12-08T13:38:52Z

Maybe it's because we re-set some attributes. I hope it's not because the options get re-rendered ... which shouldn't happen (haven't tested if it does)

gkalpak · 2016-12-08T13:46:21Z

In Chrome, it only happens if you have one element selected (e.g. select 10, then scroll back to 1, then digest). I suspect it is because of this method.

Previously, when updating the value of a `select[multiple]` element, all options were first set to `selected = false` and then the selected ones where set to `true`. By setting an already selected option to `selected = false` and then `true` again - essentially unselecting and reselecting it - caused some browsers (including Firefox, IE and (under some circumstances) Chrome) to scroll to unexpectedly scroll to the last selected option. This commit fixes it by ensuring that the `selected` property is set to its final value and only if that value is different than the previous one, thus avoiding the undesirable behavior. Fixes angular#15477

Previously, when updating the value of a `select[multiple]` element, all options were first set to `selected = false` and then the selected ones were set to `true`. By setting an already selected option to `selected = false` and then `true` again - essentially unselecting and reselecting it - caused some browsers (including Firefox, IE and under some circumstances Chrome) to unexpectedly scroll to the last selected option. This commit fixes it by ensuring that the `selected` property is only set if its current value if different than the new one and even then it is set to its final value at once (i.e. without first setting it to `false`), thus avoiding the undesirable behavior. Fixes angular#15477

Previously, when updating the value of a `select[multiple]` element, all options were first set to `selected = false` and then the selected ones were set to `true`. By setting an already selected option to `selected = false` and then `true` again - essentially unselecting and reselecting it - caused some browsers (including Firefox, IE and under some circumstances Chrome) to unexpectedly scroll to the last selected option. This commit fixes it by ensuring that the `selected` property is only set if its current value is different than the new one and even then it is set to its final value at once (i.e. without first setting it to `false`), thus avoiding the undesirable behavior. Fixes angular#15477

gkalpak · 2016-12-08T19:17:54Z

Here is a demo with the fix from #15478.

Previously, when updating the value of a `select[multiple]` element, all options were first set to `selected = false` and then the selected ones were set to `true`. By setting an already selected option to `selected = false` and then `true` again - essentially unselecting and reselecting it - caused some browsers (including Firefox, IE and under some circumstances Chrome) to unexpectedly scroll to the last selected option. This commit fixes it by ensuring that the `selected` property is only set if its current value is different than the new one and even then it is set to its final value at once (i.e. without first setting it to `false`), thus avoiding the undesirable behavior. Fixes #15477 Closes #15478

Previously, when updating the value of a `select[multiple]` element, all options were first set to `selected = false` and then the selected ones were set to `true`. By setting an already selected option to `selected = false` and then `true` again - essentially unselecting and reselecting it - caused some browsers (including Firefox, IE and under some circumstances Chrome) to unexpectedly scroll to the last selected option. This commit fixes it by ensuring that the `selected` property is only set if its current value is different than the new one and even then it is set to its final value at once (i.e. without first setting it to `false`), thus avoiding the undesirable behavior. Fixes angular#15477 Closes angular#15478

ghost changed the title ~~multiple select jumps always to lowest marked element~~ multiple select always jumps back to lowest marked element Dec 8, 2016

gkalpak added component: forms frequency: low needs: investigation severity: confusing type: bug labels Dec 8, 2016

gkalpak added this to the Backlog milestone Dec 8, 2016

gkalpak self-assigned this Dec 8, 2016

gkalpak mentioned this issue Dec 8, 2016

fix(ngOptions): do not unset the selected property unless necessary #15478

Closed

3 tasks

gkalpak removed the needs: investigation label Dec 8, 2016

gkalpak closed this as completed in 4e143fc Dec 19, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

multiple select always jumps back to lowest marked element #15477

multiple select always jumps back to lowest marked element #15477

ghost commented Dec 8, 2016 •

edited by ghost

Loading

gkalpak commented Dec 8, 2016

Narretz commented Dec 8, 2016 •

edited

Loading

gkalpak commented Dec 8, 2016

gkalpak commented Dec 8, 2016

multiple select always jumps back to lowest marked element #15477

multiple select always jumps back to lowest marked element #15477

Comments

ghost commented Dec 8, 2016 • edited by ghost Loading

gkalpak commented Dec 8, 2016

Narretz commented Dec 8, 2016 • edited Loading

gkalpak commented Dec 8, 2016

gkalpak commented Dec 8, 2016

ghost commented Dec 8, 2016 •

edited by ghost

Loading

Narretz commented Dec 8, 2016 •

edited

Loading