search

select2 / select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
https://select2.org/
MIT License
25.84k stars 6.27k forks source link

Support for jQuery 4 #6298

Open marcellov7 opened 5 months ago

marcellov7 commented 5 months ago

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 commented 5 months ago

One first observation testing select2 with jQuery4 is:

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 commented 5 months ago

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: https://github.com/codingjoe/django-select2/issues/267

jamesleesaunders commented 5 months ago

Also see https://github.com/select2/select2/issues/6253

marcellov7 commented 5 months ago

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

jonblatho commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

It is used here: https://github.com/select2/select2/blob/ed1761a7f6e88c8c5d305e7022fecb264d2271ab/src/js/select2/defaults.js#L424

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

marcellov7 commented 5 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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

sabas commented 3 months ago

see #6196

chrfritsch commented 3 weeks ago

Hi, as the select2 maintainer of the Drupal integration, I would like to see this getting landed. The upcoming Drupal 11 release will drop jQuery 3 and use jQuery 4 instead. So to provide a smooth migration for all Drupal users, that are using the select2 module(over 20k installations), from D10 to D11, getting this done is mandatory.

@kevin-brown Could you please provide a timeframe for this? I am also happy to help if necessary.