Issue with jQuery selectize enqueue and embedded tinyMCE editor

[swashata]

Hello,

The Problem

When we have the classic WP Editor (or the tinyMCE editor) embedded elsewhere (like elementor page builder or any custom plugin page), then the following script is executed

if (document.readyState === "complete" || document.readyState === "interactive") {
    if (typeof jQuery !== "undefined") {
        jQuery("#attachments-39-groups-read").selectize({
            create: true,
            plugins: ["remove_button"]
        });
    }
} else {
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof jQuery !== "undefined") {
            jQuery("#attachments-39-groups-read").selectize({
                create: true,
                plugins: ["remove_button"]
            });
        }
    });
}

directly in the page. From a quick search I see that the script is added to a bunch of pages like https://github.com/itthinx/groups/search?q=render_select&unscoped_q=render_select but I don't see that the needed selectize plugin is actually being enqueued to all of the pages.

This results in the error Uncaught TypeError: jQuery(...).selectize is not a function.

The quick solution

I believe this would prove to be a quick solution

if (document.readyState === "complete" || document.readyState === "interactive") {
-    if (typeof jQuery !== "undefined") {
+    if (typeof jQuery !== "undefined" && typeof jQuery.fn.selectize === "function") {
        jQuery("#attachments-39-groups-read").selectize({
            create: true,
            plugins: ["remove_button"]
        });
    }
} else {
    document.addEventListener("DOMContentLoaded", function() {
-        if (typeof jQuery !== "undefined") {
+        if (typeof jQuery !== "undefined" && typeof jQuery.fn.selectize === "function") {
            jQuery("#attachments-39-groups-read").selectize({
                create: true,
                plugins: ["remove_button"]
            });
        }
    });
}

The long term solution

This would be to identify why the above script is rendered on any page where tinyMCE is loaded. I don't know about elementor, but on my plugin I am using wp_editor to load the tinyMCE embedded editor for custom work. Looks like Groups plugin is hooking somewhere and injecting the inline JS, but not really enqueuing the dependencies. I don't know the inner workings of the plugin, but I can sure help you out to find the issue if you direct me where to look.

[proaktion]

Hi there,

Many thanks for the suggestions, I believe that with the latest version 2.7.2 just released, this should also be resolved with your plugin.

Please give it a try ... I am closing this for now.

Cheers!

[swashata]

From the changes I see, it sure would resolve the issue. I will let you know if something bad turns up.