diff --git a/js/tb-megamenu-chosen-fix.js b/js/tb-megamenu-chosen-fix.js new file mode 100644 index 0000000..f8a4c7e --- /dev/null +++ b/js/tb-megamenu-chosen-fix.js @@ -0,0 +1,27 @@ +/** + * @file + * Fixes compatibility issues between Chosen and jQuery in Drupal 11. + */ + +(function ($, Drupal, drupalSettings) { + "use strict"; + + // Polyfill for jQuery.trim if it doesn't exist (jQuery 4.x removed it) + if (typeof $.trim !== 'function') { + $.trim = function(text) { + return text == null ? "" : (text + "").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ""); + }; + } + + Drupal.behaviors.tbMegaMenuChosenFix = { + attach: function (context) { + // Apply chosen with a slight delay to ensure jQuery.trim polyfill is available + setTimeout(function() { + $("#tb-megamenu-admin select").chosen({ + disable_search_threshold: 15, + allow_single_deselect: true + }); + }, 100); + } + }; +})(jQuery, Drupal, drupalSettings); diff --git a/js/tb-megamenu.backend.js b/js/tb-megamenu.backend.js index 1234567..abcdefg 100644 --- a/js/tb-megamenu.backend.js +++ b/js/tb-megamenu.backend.js @@ -19,10 +19,7 @@ Drupal.TBMegaMenu = Drupal.TBMegaMenu || {}; $(this).parent().html(""); }); - $("#tb-megamenu-admin select").chosen({ - disable_search_threshold : 15, - allow_single_deselect: true - }); + // Chosen initialization moved to tb-megamenu-chosen-fix.js /* Init TB Mega Menu. */ if (drupalSettings.TBMegaMenu.menu_name !== undefined) { diff --git a/tb_megamenu.libraries.yml b/tb_megamenu.libraries.yml index 1234567..abcdefg 100644 --- a/tb_megamenu.libraries.yml +++ b/tb_megamenu.libraries.yml @@ -9,6 +9,7 @@ form.configure-megamenu: js: js/tb-megamenu.backend.js: { scope: footer } js/tb-megamenu.object.js: { scope: footer } + js/tb-megamenu-chosen-fix.js: { scope: footer } dependencies: - core/jquery - core/drupal @@ -32,11 +33,11 @@ theme.tb_megamenu: - core/once form.chosen: - version: 1.1.0 + version: 1.8.7 css: theme: - https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css: { type: external } + https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css: { type: external } js: - https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js: { type: external, group: JS_LIBRARY, scope: footer } + https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js: { type: external, group: JS_LIBRARY, scope: footer } dependencies: - core/jquery