Support for jQuery 4

[marcellov7]

Hi,

I'm an enthusiastic user of Select2 and greatly appreciate its features and effectiveness. However, with the recent announcement of the release of jQuery 4 and its promises to significantly improve library performance, I was wondering if there are plans to ensure Select2 compatibility with this new version of jQuery.
https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/

I understand that Select2 relies on jQuery and that the upgrade may take time and effort, but considering the potential benefits in terms of performance and future compatibility, it would be extremely helpful for the community to know if there is a commitment to making Select2 compatible with jQuery 4.

Is there a roadmap or defined plan for this? Additionally, if there are opportunities to contribute or support this effort, I would be happy to provide my assistance.

Thank you

[jamesleesaunders]

One first observation testing select2 with jQuery4 is:

• jQuery.isArray is deprecated; use Array.isArray

jQuery: 3.7.1
select2: 4.1.0-rc.0
django-select2: 8.1.2

        if (self.options.get('debug') && window.console && console.error) {
          // Check to make sure that the response included a `results` key.
          if (!results || !results.results || !$.isArray(results.results)) {             <--- HERE
            console.error(
              'Select2: The AJAX results did not return an array in the ' +
              '`results` key of the response.'
            );
          }
        }

jquery.js:1 JQMIGRATE: Migrate is installed with logging active, version 3.4.1
jquery.js:1 jQuery Version 3.7.1 Loaded
jquery.js:1 JQMIGRATE: jQuery.isArray is deprecated; use Array.isArray
a @ jquery.js:1
t.<computed> @ jquery.js:1
n._resolveLanguage @ select2.full.min.js:2
n.applyFromElement @ select2.full.min.js:2
e @ select2.full.min.js:2
d @ select2.full.min.js:2
(anonymous) @ select2.full.min.js:2
each @ jquery.js:1
each @ jquery.js:1
r.fn.select2 @ select2.full.min.js:2
initHeavy @ django_select2.js:48
(anonymous) @ django_select2.js:56
each @ jquery.js:1
$.fn.djangoSelect2 @ django_select2.js:53
(anonymous) @ django_select2.js:71
l @ jquery.js:1
c @ jquery.js:1
setTimeout (async)
(anonymous) @ jquery.js:1
u @ jquery.js:1
fireWith @ jquery.js:1
fire @ jquery.js:1
u @ jquery.js:1
fireWith @ jquery.js:1
ready @ jquery.js:1
Z @ jquery.js:1
jquery.js:1 console.trace
a @ jquery.js:1
t.<computed> @ jquery.js:1
n._resolveLanguage @ select2.full.min.js:2
n.applyFromElement @ select2.full.min.js:2
e @ select2.full.min.js:2
d @ select2.full.min.js:2
(anonymous) @ select2.full.min.js:2
each @ jquery.js:1
each @ jquery.js:1
r.fn.select2 @ select2.full.min.js:2
initHeavy @ django_select2.js:48
(anonymous) @ django_select2.js:56
each @ jquery.js:1
$.fn.djangoSelect2 @ django_select2.js:53
(anonymous) @ django_select2.js:71
l @ jquery.js:1
c @ jquery.js:1
setTimeout (async)
(anonymous) @ jquery.js:1
u @ jquery.js:1
fireWith @ jquery.js:1
fire @ jquery.js:1
u @ jquery.js:1
fireWith @ jquery.js:1
ready @ jquery.js:1
Z @ jquery.js:1

[jamesleesaunders]

Actually, stand down on the isArray comment above. This looks to be an issue with django-select2 including an older version of select2 (4.0.13). It looks like you have already replaced all instances of $isArray in the latest (4.1.0-rc.0).

I have raised issue over on the django-select2 side: codingjoe/django-select2#267

[jamesleesaunders]

Also see #6253

[marcellov7]

In general, it seems to work, but a more in-depth analysis would be needed.

[jonblatho]

I'm sure I don't speak for everyone, and I'm not sure how much effort the jQuery 4 migration will require, but personally as a user, if substantial effort is going to be spent on a migration I'd much rather it be spent on removing the jQuery dependency altogether (#6196).

[marcellov7]

I'm sure I don't speak for everyone, and I'm not sure how much effort the jQuery 4 migration will require, but personally as a user, if substantial effort is going to be spent on a migration I'd much rather it be spent on removing the jQuery dependency altogether (#6196).

I don't think it's strictly necessary given the nature of the plugin, there are several alternatives out there that work very well without jQuery. Also because the time it would take you to rewrite things without jQuery (if ever a Select2 without jQuery will ever be released) you have already made the switch to another one without jQuery.
Furthermore, with ChatGPT you would quickly switch to an alternative. 🤣

jQuery 4 brings notable improvements and since Select2 is incorporated into this, it is in my opinion important to do a check to determine if any problems with jQuery v4 come out, but it seems to work very well for the moment.

I opened the issue only to encourage those who are more familiar than me to carry out a more in-depth check based on the deprecate elements in jQuery 4.

[Nedlinin]

@marcellov7 : According to jQuery, camelCase no longer exists: https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/

It is used here:

select2/src/js/select2/defaults.js

Line 424 in ed1761a

var camelKey = $.camelCase(key);

Not sure what else might be broken but this one at least stood out to me as broken on one of my sites.

[marcellov7]

https://github.com/marcellov7/select2/tree/support-jQuery-4.0.0-beta
I should have sorted everything out, it seems OK in the testing part too.
Please review and pull request if necessary.

Thanks

[JCCChris]

Seems like it would be possible to inject the missing functions back into jQuery and use the native functions and add the extra bit that jQuery added such as null handling.

Anyone see any problems with the following code to add the missing functions back in: (after jQuery but before select2)

jQuery.isArray = Array.isArray || function (value) {
return Object.prototype.toString.call(value) === '[object Array]';
};
jQuery.trim = function (text) {
return text == null ? "" : text.trim();
};
I didn't need to replace camelCase() for some reason, but that might need to be filled in too.

[jamesleesaunders]

Would the effort be best simply refactoring the bits of code (if any) which uses these?

Otherwise if you were to be running the jQuery migrate add-on it would it still be complaining that these functions are deprecated? https://github.com/jquery/jquery-migrate

That said, granted it would still work.

[JCCChris]

I would love it if this project would refactor to eliminate deprecated calls.

[sabas]

see #6196