Select2 onChange event cancels my scrollTop command in Firefox

Question

I am using Select2 extensively. I am trying to run $('html,body').scrollTop() function inside Select2 .on('change') event but it doesn't work properly. My code:

$('.category_select').on('change', function(e){
    var scroll_pos = $('#category_'+$(this).select2('val')).offset().top;
    $('html,body').scrollTop(scroll_pos);
});

If the scroll position is larger then top offset of select2 element then select 2 will reposition scroll so that select2 element remains visible. How can I go around this?

UPDATE:

I have created fiddle that shows this problem http://jsfiddle.net/83acq8hp/2/. This issue is only existing in Firefox. In Safari and Chrome it works normally, but in Firefox as the fiddle shows not.

Hmm I have created a Fiddle to demonstrate the problem but it works as expected :S http://jsfiddle.net/83acq8hp/. In my app it doesn't work as shown in fiddle, the scroll always stops at the select element. Maybe it's the version of selec2, I need to make further tests... — Primoz Rome, Mar 02 '15 at 16:27
@milz the issue is only present in Firefox. You can check the above fiddle: http://jsfiddle.net/83acq8hp/2/ — Primoz Rome, Mar 03 '15 at 09:23

score 2 · Accepted Answer · edited May 23 '17 at 11:43

Nice "bug" you found with Firefox.

If you change the options long enough you'll see that the scroll bar goes down to the correct option and then comes up again to the select2 (this is really quick so you need to look at the scrollbar to see it).

This got me thinking that the scroll part works but something was forcing the select2 input to be displayed. So, my bet was on focus.

This jsfiddle demonstrates my debug process and this is the code you should use to work it out:

$('#mySelect').select2();

$('#mySelect').on("change", function(e) { 
    var element = '#test'+$(this).select2('val');
    var scroll_pos = $(element).offset().top;

    $('html,body').scrollTop(scroll_pos);
})
.on("select2-close", function () {
    setTimeout(function() {
        $('.select2-container-active').removeClass('select2-container-active');
        $(':focus').blur();
    }, 1);
});

Basically, you need to use the event select2-close to remove the focus from select2 input. Otherwise, Firefox will show the element that has the focus.

The code I used for select2-close belongs to this answer and you can check this working jsfiddle without the debug noise.

Great thanks a lot @milz. I was suspecting it right that something inside select2 was forcing scroll to stop. Really grateful for your help. Maybe I should submit this issue to the select2 — Primoz Rome, Mar 03 '15 at 12:32
I'm glad I could help you. Yeah, you can submit an issue on GitHub. Now sure if they can do something about that though, since the issue only occurs with Firefox. — Luís Cruz, Mar 03 '15 at 12:43

Select2 onChange event cancels my scrollTop command in Firefox

1 Answers1