Bug: Open dropdown list snaps back to top if first several options are disabled when hovering over first enabled option

[bsmithwick]

Steps to reproduce:

• create a dropdown list with enough disabled options at the top of the list that no enabled options are visible when the dropdown list is opened
• using a scrollwheel, scroll down the list far enough to reveal some enabled options (but at this point your mouse should still be over one of the disabled options)
• drag the mouse down until it crosses over the first enabled option

Expected behavior:

• nothing happens

Actual behavior:

• we are snapped back to the top of the list

Here's a jsfiddle demonstrating the problem: http://jsfiddle.net/7JaZb/

It's a little tricky to reproduce, so if you need a screencast or more details, please let me know.

This doesn't appear to happen if the first option is enabled, even if enough subsequent options are disabled to push the rest of the enabled options off the bottom of the visible part of the list when it's initially opened.

Only hovering over the very first enabled option causes this to happen. Scrolling down the list using the scrollbar, then moving your mouse up from the bottom of the list, works OK until you hit the topmost enabled option.

The net result is that it's not possible to select the topmost enabled option with the mouse when this happens. You can still get to it by typing to filter the list, so you're not totally blocked, but it's close.

[derekvasilich]

I am also having this issue. Here is the JSFiddle: http://jsfiddle.net/derekvasilich/gefBD/

Any idea if/when this will be resolved? Or is there a workaround?

[kevin-brown]

@derekvasilich It doesn't appear as though a workaround has been found, though if you are able to find one (or a fix), feel free to make a pull request/comment about it.

This may be related to #2038, considering they both seem to have the same problem (just different setups).

[mkurz]

Same bug as in #2189

[sandervellinga]

I have the same issue. This is introduced by this commit:

ivaynberg@95a144d

Apparently to fix keyboard navigation. While keyboard navigation works better with the changes, it's still not bulletproof. When all the options you can see with the scrollbar on top are disabled and you navigate with your keyboard to the first enabled option, it also jumps to the top. The result here is that you cannot see your selected item.

Lacking a better solution I chose to turn off this behavior for now.

[ggondim]

As a workaround for this issue, I removed the code results.scrollTop(0), at ensureHighlightVisible function, that was causing the scrolling.

I'm thinking that it is a start point to fix this issue. Maybe inside this function the code maybe may determine if the first option is preceded by disabled options.

[shavo007]

Has this issue been resolved yet?

[kevin-brown]

@shavo007 Should be fixed in 4.0 as we no longer "guess" where the highlight should be.

https://github.com/ivaynberg/select2/pull/2743

[shavo007]

Cheers for the reply. 4.0 milestone is targeted for Jan 2015 Kevin?

[NewLIST]

See this solution. It works without hacking the control.
#1513

[richrout]

Is anyone still seeing the bug in 4.0.3? I am getting it with a multiple selection.
If I select something, scroll down, select something else, it appears to scroll back up to where I selected the first thing.
@NewLIST your solution helped. I did have to modify it a bit; different methods of input (keyboard, etc) didn't always populate the events...

var scrollTop;

this.selectElement.on("select2:selecting select2:unselecting", (event: any) => {
  if (event.params.args.originalEvent) {
    scrollTop = $(event.params.args.originalEvent.delegateTarget)
      .prop('scrollTop');
  }
}).on("select2:select select2:unselect", (event: any) => {
  if (event.params.originalEvent) {
    $(event.params.originalEvent.delegateTarget)
      .prop('scrollTop', scrollTop);
  }
});

[shawty]

I'm not seeing this specific bug, but I am seeing a similar thing.

If I have a select with objects say:

{id: 1. name: "Peter"}
{id: 2. name: "John"}
{id: 3. name: "Paul"}
{id: 4. name: "Mary"}

And a local class property say

selectedName = 3;

When the form loads, it will show "Paul" in the drop down, but as soon as I change it, the bound value in the select value changes to the correctly selected value, but the text in the drop down snaps back to the first in the list "Peter"

adding a text box above the select and binding it to the same value as the select shows that the value in there persists correctly EG: 2 if I select john, but the select will always show "Peter", this also works the other way too.

If I change the value in the text box, the value changes but the select stays stuck on the first item in the list.