select2-4.0.5 doesn't seem to work well with jquery-3.4.0

[kikonen]

Tried select2-4.0.5 with jquery-3.4.0 and started to encountered strange bug with focus logic. Especially multiselect widget was behaving very oddly (input focus disappeared, keyboard up/down started to change selected value in the field (no popup selector shown)).

Reverted back to jquery-3.3.1 and strange behaviours seemed to fix themselves. So I concluded that there might be some compatibility problem going on.

[herbalite]

There are at least 2 bugs in jquery 3.4.0. Probably best to wait until 3.4.1
https://github.com/jquery/jquery/issues

[JamoCA]

This is a pretty bad bug... Every advanced integration on my form worked perfectly (muliple data sources, ajax, etc) except for the "tag" function. We hadn't rolled 3.4.0 out fully in production, so I was the only one encountering the issue. It was frustrating trying to troubleshoot and I finally figured I'd check the issues reported on GitHub. Thanks for reporting this!

[kevin-brown]

I can confirm that if I run the tests under 3.4.0, it throws a ton of errors. Unfortunately those errors appeared to have been introduced in 3.2/3.3 and make it a bit difficult to trace the exact issues at play.

Any chance someone can generate a quick jsbin which demonstrates the problems under 3.4.0?

[neerone]

Same thing with focus logic. jQuery 3.4.1

[fydelio]

Closing my other issue and moved it here. Here is a phenomenon I encountered using jQuery 3.4.0 and the latest select2 4.0.7

For my select2 box I have multiple and tagging enabled. Interestingly with this setup I can only create new tags with max 2 characters. Selecting an existing option with a longer text-value no problem. If I revert to jQuery. 3.3.1 the problem disappears!

Please see the JSFiddle here

[devkral]

is there a way to hack a workaround?

[mariuszkrzaczkowski]

When can we expect the error to be fixed?

[borisson]

@kevin-brown you asked for an example. I found this issue trough https://stackoverflow.com/questions/56046676/select2-cant-create-new-options-longer-than-2-characters-tag-true the jsfiddle there demonstrates the problem https://jsfiddle.net/rqyzupjv/2/

[mariuszkrzaczkowski]

What is the problem to fix it? This is a serious bug

[blikblum]

Hi, instead of coming here and blame developers, i take a time and investigated.

The issue is caused by a change in a change how jquery handle focus event: jquery/jquery@669f720

The affected code is:

  if (searchHadFocus) {
      var isTagInput = this.$element.find('[data-select2-tag]').length;
      if (isTagInput) {
        // fix IE11 bug where tag input lost focus
        this.$element.focus();
      } else {
        this.$search.focus();
      }
    }

Changing this.$element.focus(); to this.$element[0].focus(); fixes the issue.

BTW seems that call to this.$element.focus(); is necessary not only in IE11 but also with at least Firefox

[devkral]

thanks, I hope it is fixed soon.
the affected code of the snippet is in
src/js/select2/selection/search.js

[fydelio]

@blikblum , @borisson : I tried your solution with fixing the function in search.js. Your solution doesn't seem to solve the tagging problem yet (check this JSFiddle(https://jsfiddle.net/rqyzupjv/2/). Therefore not quite sure whether the solution (which for sure is valid) fixes ALL compatibility issues.

Not trying to blame / complain, I'm just not good enough in JS to debug this issue as you did, @blikblum.

[blikblum]

(check this JSFiddle(https://jsfiddle.net/rqyzupjv/2/)

I tested with this exact code and is working with the fix

[devkral]

where is the fix applied? I see in the jsfiddle only dependencies to the upstream cdn libraries

[blikblum]

I tested in my local machine. Seems is not applied yet. borrison fixed in his fork

[kevin-brown]

So, now I'm in a tough spot with this one. I got the tests running on jQuery 3.4.1 and they are all passing (see #5531).

Is anyone interested in creating a failing test case for this? The jsfiddle should be a solid place to start, since we have a guess as to what features might be broken.

[ahmedali5530]

There are at least 2 bugs in jquery 3.4.0. Probably best to wait until 3.4.1
https://github.com/jquery/jquery/issues

i have jquery 3.4.1 and this issue still exists!

[devkral]

$(...).selectize({
create: true,
delimiter: null,
plugins: {
'remove_button': {}
}
});

is a fine workaround ;-). It configures selectize to behave like select2 with tags but without this bug.

[kevin-brown]

Just going to copy the comment from #5516 (comment) over to here, for visibility:

We have a jsbin for this, which is why we know the issue exists. Unfortunately we can't reproduce this issue in our current test suite, which explains why it wasn't caught earlier. If someone is willing to donate some of their time to making a unit test that reproduces this issue, I'll willing to donate some time to fixing whatever is causing the issue.

[blikblum]

@kevin-brown here you have: #5550

[collimarco]

@kevin-brown Can you please merge @blikblum pull request and release the new version?

[blikblum]

@collimarco
You can try install select2-lite package. It contains the recent PRs i sent. In the future will got other changes: https://github.com/blikblum/select2-lite/issues