Apparent Conflict: Avada / ACF Pro (select2)

• jsteckler

• June 18, 2019 at 3:57 am

While ACF Pro (v 5.8.1) is activated, neither Avada Theme’s “Fusion Builder”, nor the “Default Editor” is loading on the edit screen for posts and pages.

I’m seeing the following error:

select2.min.js?ver=4.0.3:1 Uncaught Error: No select2/compat/dropdownCss
    at j (select2.min.js?ver=4.0.3:1)
    at n (select2.min.js?ver=4.0.3:1)
    at select2.min.js?ver=4.0.3:1
    at D.apply (select2.min.js?ver=4.0.3:2)
    at new e (select2.min.js?ver=4.0.3:2)
    at new e (select2.min.js?ver=4.0.3:2)
    at HTMLSelectElement.<anonymous> (select2.min.js?ver=4.0.3:3)
    at Function.each (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-widget,jquery-ui-position,jquery-color,jquery-ui-core,jquery-ui-mouse,jquery-ui-sorta&load[]=ble,underscore,moxiejs,plupload&ver=5.2.1:2)
    at a.fn.init.each (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-widget,jquery-ui-position,jquery-color,jquery-ui-core,jquery-ui-mouse,jquery-ui-sorta&load[]=ble,underscore,moxiejs,plupload&ver=5.2.1:2)
    at a.fn.init.a.fn.select2 (select2.min.js?ver=4.0.3:3)

Oddly enough, Fusion Builder is loading just fine on the custom post type for which I actually utilize ACF Pro fields (Tribe Events posts — from The Events Calendar Pro). It is only on non-Tribe Events post/page types that the Fusion Builder fails to load.

• John Huebner

• June 18, 2019 at 7:47 am

You can try to not load select2 for ACF, see this page https://www.advancedcustomfields.com/resources/acf-settings/

add_filter('acf/setting/enqueue_select2', '__return_false', 20);

• jsteckler

• June 18, 2019 at 8:39 am

That filter did the trick. Thank you very much, John.

What are the potential downsides of such a solution? Minor UI loss?

And while the ACF filter solution is certainly cleaner, I also happened upon this solution, which worked, but seems to be forcing a specific version of select2 to load, presumably site-wide:

function enqueue_select2_jquery() {
wp_register_style( 'select2css', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css', false, '1.0', 'all' );
wp_register_script( 'select2', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js', array( 'jquery' ), '1.0', true );
wp_enqueue_style( 'select2css' );
wp_enqueue_script( 'select2' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_select2_jquery' );
add_action('admin_head', 'my_admin_ket');
function my_admin_ket() {
echo '

<script type="text/javascript"> jQuery(document).ready(function($) { jQuery(".option-tree-ui-select").select2(); }); </script>
';
}
}

Any opinion as to whether or not I’d better off going a similar route, if not this latter solution exactly?

As a side note (mostly), ACF Pro and The Events Calendar are bundled with Avada Theme to some extent, which makes me wonder what’s going on under the hood to help the error be avoided on the custom Tribe Events post type, but not on the native posts/pages type.

• John Huebner

• June 18, 2019 at 9:00 am

It really depends on the version of select2 being loaded. Some of the features in older versions are not available in newer versions while there are some features in the newer version that did not exist previously. It all depends on what version each is using.

It could have simply been a conflict with the two plugins loading the same code which would cause a JS error and make them both fail. This can happen if the plugins use a different “handle” for the script, if all plugins use the same handle then it is impossible to load two instances of a script, the fist one that gets enqueued wins.

It could also be the the events plugin has altered their version of select2 in a way that makes it possible to load both libraries because they are not identical.

It’s really hard to say.

• jsteckler

• June 19, 2019 at 12:13 am

Awesome stuff, thank you. I really appreciate the additional insight.