Select List Jumping to The Top When Clicking On Scrolled Items

[farzadso]

Initially I would like to thank you for your contribution.

I have discovered an issue and it happens when I click on List Items below the list, it jumps up to the top of the list as you can see in the gif below :

[nbuytaert1]

I'm afraid that's a bug in the Select2 jQuery plugin.
More information here: select2/select2#1513

There's a hacky fix to prevent the jump. Execute the following JavaScript code on page load:

var scrollTop;
$('#P10_MY_SELECT2_ITEM').on('select2:selecting select2:unselecting', function(event) {
  var $pr = $('#'+event.params.args.data._resultId).parent();
  scrollTop = $pr.prop('scrollTop');
});
$('#P10_MY_SELECT2_ITEM').on('select2:select select2:unselect', function(event) {
  var $pr = $('#'+event.params.data._resultId).parent();
  $pr.prop('scrollTop', scrollTop);
});

Replace P10_MY_SELECT2_ITEM with the name of your Select2 page item.

[farzadso]

just tested, it still happens

[farzadso]

could it be due to the fact that i'm using lazy loading?

[farzadso]

sorry for messaging again, any updates?

[nbuytaert1]

Sorry for the delay.
You are right, the fix doesn't work in combination with lazy loading.
I have no other solution for the moment. It's a bug in the Select2 plugin, which makes it difficult for me to fix.

[shawty]

Just for reference, this is ALSO happening with non multiple select drop downs.

[farzadso]

I've gone through the entire source code over and over again. Modified it in several places. I can't find a workaround @shawty

[Inzy07]

click event is not working in apex2 plugin
can anyone tell me quick fix for this?