Contrib.social

Chosen library incompatible with jQuery 4.x in Drupal 11

Open on Drupal.org →
Created on 15 June 2025, 3 months ago

Issue Summary

TB Megamenu 1.9.0 uses Chosen library 1.1.0 which is not compatible with jQuery 4.x (included in Drupal 11). This causes a JavaScript error: "Uncaught TypeError: t.trim is not a function" that prevents the menu from functioning properly in the admin backend.

Environment

  • Drupal: 11.1.8
  • TB Megamenu: 1.9.0
  • jQuery: 4.0.0-beta.2 (included in Drupal 11)

Steps to Reproduce

  1. Install Drupal 11.x
  2. Install and enable TB Megamenu module
  3. Navigate to TB Megamenu configuration (admin/structure/tb-megamenu)
  4. Open browser console
  5. Observe the error: "Uncaught TypeError: t.trim is not a function"

Cause of the Problem

The error occurs because jQuery 4.x has removed the $.trim() method that the Chosen library uses internally. In previous versions of jQuery, this method was available, but in jQuery 4.x it has been removed as part of the API cleanup.

🐛 Bug report
Status

Active

Version

1.9

Component

Code

Created by

🇺🇾Uruguay yassermussa

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @yassermussa
  • Comment 3 months ago →
    🇺🇾Uruguay yassermussa

    Proposed Solution

    I have created a patch that:

    1. Updates Chosen version from 1.1.0 to 1.8.7 (more recent and stable)
    2. Implements a polyfill for $.trim() when it's not available
    3. Delays Chosen initialization to ensure the polyfill is available
    4. Moves initialization to a separate JavaScript file for better maintenance

    The patch modifies three files:

    • Creates a new file js/tb-megamenu-chosen-fix.js with the polyfill and delayed initialization
    • Modifies js/tb-megamenu.backend.js to remove the original initialization
    • Updates tb_megamenu.libraries.yml to include the new file and update Chosen version

    Benefits

    • Maintains compatibility with Drupal 11 and jQuery 4.x
    • Doesn't break compatibility with previous versions
    • Uses a more recent and secure version of Chosen
    • Implements an elegant solution with a polyfill instead of modifying the library

    Patch

    https://www.drupal.org/files/issues/2025-06-15/tb_megamenu-jquery4-fix-3... →

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024