when use multi-select with [closeOnSelect: false] each time you select option the menu scroll to the first option. v4.0.3

[AWasseem]

when use multi-select with [closeOnSelect: false] each time you select option the menu scroll to the first option .
then scroll again down to select another option its do not keep the last position i stood on v4.0.3
example:
1- select (a)

2- after select (i) the menu scroll to (a) again

Environment

Libraries

• Select2 version:4.0.3

[jgbishop]

This bug is a byproduct of the commit to fix #4238. I'm not sure what the best course of action on this is, but I'd argue that the "highlight first item" feature should be adjusted to work either only in the infinite scroll case (while the popup is open and the user is scrolling), or via a user-set option.

@AlexanderLeonov Any ideas on how the highlightFirstItem could be tweaked to fix this case? I use the control without infinite scrolling (my option set is fixed size), and I find it annoying that the first selected item is scrolled into view when I'm editing my choices.

Here are the commits that introduce this code:

• Fixed infinite scrolling issue using down key.
• Renamed focusFirstItem method
• Added tests for focusing results

[EstherAF]

Totally agree with @jgbishop here. I don't know enough about this project to try to fix this by myself and make a pull request.
If @AlexanderLeonov is not answering, @kevin-brown may have an opinion about how to tackle this issue...
By now, I'm downgrading to 4.0.2, where this issue is not happening.

[AlexanderLeonov]

@jgbishop, you are not entirely correct. I've walked through the commits and discovered that this change was actually introduced by the commit 9f58128, particularly by adding this.ensureHighlightVisible(); call in the highlightFirstItem(). What is more interesting is that the behavior had not actually changed a lot - the first item had been highlighting even before my commit, it just hadn't been forced to scroll into view until @kevin-brown added above call.
So, I guess the solution would be to remove this.ensureHighlightVisible(); call, but I'm not sure why it was done in the first place.
@kevin-brown, can you please comment this moment?

PS. Actually, I'm not even entirely clear on the whole idea of highlighting the first item after selecting something.

[iangus]

The issue stems from the call to self.highlightFirstItem() on line 279 of results.js. This was introduced in commit e897d00 as self.focusFirstItem(). @kevin-brown @AlexanderLeonov, why is this call made on select? Is there any reason for highlighting the first selected element on selection? Removing this call will solve the issue.

[franciscolourenco]

#4682 #4584 duplicate of this?

[phazei]

There's a proposed solution in #4584

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

[alexweissman]

#4869 also addresses the problem. This solution needs to be compared to the solution proposed in #4584, which is to add some logic to conditionally invoke self.highlightFirstItem():

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

@MicahBrown could you please take a look at this?

[smalezan]

Find this part of the select2.min.js and delete it.

,f=this.$results.scrollTop()+(e-d),g=e-d;f-=2*a.outerHeight(!1),c<=2?this.$results.scrollTop(0):(g>this.$results.outerHeight()||g<0)&&this.$results.scrollTop(f)

It worked for me

[alexweissman]

@smalezan deleting minified, compiled code is literally the worst possible way to solve a problem like this. Please take some time to learn about version control, minification, and the general concept of a "build step" in deploying an application.

[nikhilzac95]

@kevin-brown @alexweissman is there update regarding this? Is there a way to fix this issue?

[marciojg]

@kevin-brown @alexweissman any news for fix this issue?
Has the same behaviour in version 4.0.5
The good suggestion for solution is this PR #5150

[pedrofurtado]

@kevin-brown @alexweissman It's good to add this fix in next release (4.0.6). So, all users can get this fix.

[james-simpson-ST]

@kevin-brown @alexweissman I've had to put this work around manually into our version, is there any update of whether this will make it into the 4.0.6 release? It doesn't currently seem to be in the milestones.

[danreg]

@kevin-brown @alexweissman could you please put this fix into a release?

[eugeneborodkin]

This is horrible. The Multi-Select is almost unusable because of this auto-top-scroll on every selection. How come this isn't part of the plugin yet? When will this be fixed? What should we do in the meantime (it's Sep. 2018 currently)?

[eugeneborodkin]

Current solution which works for me

Replace this highlightFirstItem function() {...} to be "{return false;}" as below:

c.prototype.highlightFirstItem=function(){return false;}

[pedrofurtado]

This issue can be closed. The solution is already merged in #5150 . There are some docs improvements (these links is in the PR page) to explaining how to config select2 to fix this bug.
In the next release, this change will be available for all users.

[nikhilzac95]

When would the next release be @pedrofurtado ?

[pedrofurtado]

@nikhilzac95 In next weeks, I am planning to release a 4.0.x with this and other UI bug fixes.

[nikhilzac95]

Thanks for the update @pedrofurtado 👍

[Ankita9818]

When would the next release be @pedrofurtado ?

[nikhilzac95]

@pedrofurtado the last time we spoke on Sept 12, you told me we'll do a release in a couple of weeks. Can you do it any soon? Would really appreciate it. 💯

[Ankita9818]

Hey @pedrofurtado , any updates on this bug fix ??

[primedev22]

@pedrofurtado , this issue still remains in v4.0.6-rc.1. Any solution?

[shahimclt]

Just got released: https://github.com/select2/select2/releases/tag/4.0.6

[eugeneborodkin]

Although Version 4.0.6 fixes this Autoscroll-To-First bug in MultiSelect, another bug got introduced in this version.
If I have multiple Select2's on the page, some of which are flat single-select dropdowns, those dropdowns are now broken. When I open a flat single-select, I can no longer close it; the popup stays open.
I only solved this and got all Select2's to work (both multi and single) when I went back to 4.0.6 RC1 and manually made this modification,

c.prototype.highlightFirstItem=function(){ return false; }

Now I can close my flat single-selects, AND avoid the autoscroll-to-first in multi-selects, all on the same page.

[kevin-brown]

Now I can close my flat single-selects, AND avoid the autoscroll-to-first in multi-selects, all on the same page.

Have you considered upgrading to the latest version of Select2, 4.0.13?

[click2cloud-Sohel]

By Removing this.ensureHighlightVisible() from select2.js work for me

[hemant-rao]

this code working fine for my side, I hope this will help you.

$('#selectmultiple').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')));