select2 with closeOnSelect false loses scroll position on select

Question

Select2 version 4.0.3: When using multi-select of a large list of options with closeOnSelect set to false, I'm trying to select a number of options from the middle of the large list. Each time I select an option the selection items list scrolls back to the first option. I then have to scroll back down the list to find the option after the one I had just selected.

Is there a way to configure Select2 to retain the scroll position after selecting a particular option?

Answer 1

I don't recommend downgrading or modifying the source code, for obvious reasons. The dev has stated that this problem will be fixed in the upcoming update.

For the time being, hooking to the "selecting" and "select" events works fine:

$('select[multiple]').select2({
    closeOnSelect: false
})
 .on('select2:selecting', e => $(e.currentTarget).data('scrolltop', $('.select2-results__options').scrollTop()))
 .on('select2:select', e => $('.select2-results__options').scrollTop($(e.currentTarget).data('scrolltop')))

Answer 2

This is an internal issue with select 2 plugin.

It was a a regression which occurred after the addition of following function, highlightFirstItem(); on option select event

As per the link, https://github.com/select2/select2/issues/4584

the fix to this is to add following condition before executing this function,

if(!(self.options.get('multiple') && !self.options.get('closeOnSelect'))) {
  self.highlightFirstItem();
}

So on select event(on line#1036 in select.js file) becomes, before -

container.on('select', function () {
      if (!container.isOpen()) {
        return;
      }

      self.setClasses();
      self.highlightFirstItem(); 
});

after -

container.on('select', function () {
      if (!container.isOpen()) {
        return;
      }

      self.setClasses();

      if(!(self.options.get('multiple') && !self.options.get('closeOnSelect'))){
        self.highlightFirstItem();
      } 
});

So before highlighting the first element i.e.., resetting the scroll to top we are verifying whether current select2 dropdown has a multi select enabled and closeOnSelect option is not set to false, if any of these is true then highlight first option is not called so scroll is retained on option select

You have to make this edit in the select2.js library as there is no official select2 release with this fix yet. I have used select 2 version 4.0.3 for edit.

Following are the steps, Download select2 4.0.3 zip, from https://github.com/select2/select2/tags

For minification of the source file(select2.js), install nodejs in your local.

Extract the folder, go to dist/js/ open select2.js and replace the container.on('select') function code in code mentioned in after above.

For file minification(uglification), select2 uses grunt, so open extracted select2-4.0.3 folder on command line.

Run following commands, npm install npm install -g grunt-cli grunt uglify

The code changes made above will be moved into select2.min.js file in select2-4.0.3/dist/js folder which you can use as a select2 js file now in your project

Hope this helps

Answer 3

After seeing this comment:

https://github.com/select2/select2/issues/4417#issuecomment-256575280

I also downgraded to 4.0.2 from 4.0.3 and it's fixed.