When a select2 list is long, clicking remove scrolls to bottom

[notflip]

When the list is short and I can visually see all the tags selected, When I click the remove button it works.

But when it's a long list that I have to scroll in, the list jumps down without removing the select2 tag.
Any idea's? Any help is welcome!

[alexweissman]

This issue does not appear to conform to our contributing guidelines.

Please re-read the contributing guidelines carefully and then edit your question. Once your issue complies with the guidelines, we can reopen it.

[jheiss]

Here's a fiddle that should have enough options populated to demonstrate this on most monitors:

http://jsbin.com/jibefazebi/edit?html,js,output

All I did was set "multiple" and populate enough options to push the bottom of the select2 box off screen.

As @notflip noted, if you click on the remove x for an item it is not removed and instead you are scrolled to the bottom of the select2 box. If you scroll back up and click remove a second time the item is removed.

No errors are reported in the console.

(@alexweissman, if you concur that this bug report now meets the contributing guidelines can you reopen it?)

[antoineluong]

Can this issue be reopened, or should we create a new one?

[debugd]

This is still an issue

[kevin-brown]

Reopening now that more information has been added.

[kevin-brown]

This issue is present in Select2 4.0.13 but has been resolved in Select2 4.1.0-rc.0.

https://jsbin.com/koqicujumi/edit?html,js,output

[jheiss]

Maybe it's just me, but I still see the same behavior in that fiddle using 4.1.0-rc.0.

[kevin-brown]

Maybe it's just me, but I still see the same behavior in that fiddle using 4.1.0-rc.0.

From my testing, it's still scrolling to the bottom but this time it's now removing the option as expected.

[debugd]

Same

[jheiss]

OK, did a bit more checking this time. In Safari I still see the old behavior (item not removed). In Chrome and Firefox the item is removed. The item is not removed in Chrome and Firefox with select2 4.0. So there's definitely an improvement. (And in my work environment where I'm encountering this nobody's using Safari, so yay!)

[CameronKolick]

I understand why it scrolls down for a long list because it is focusing the select2 element which needs to bring the dropdown into view. Would it make sense to stopPropagation when the "X" is clicked so it doesn't focus the element and the dropdown doesn't show?

[kevin-brown]

Would it make sense to stopPropagation when the "X" is clicked so it doesn't focus the element and the dropdown doesn't show?

Good news, you can prevent this! Check out #3209 (comment) for the official recommendation for how to do this without modifying the internals of Select2.