Clash with Select2 in cmb-field-select2

[gyrus]

• [x] I've read and understood the contribution guidelines.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

Using this add-on for the CMB2 plugin - https://github.com/mustardBees/cmb-field-select2 - Yoast seems to intefere with its implementation of the Select2 jQuery interface, meaning that the drag-and-drop ordering for selections aren't maintained by that add-on.

When selected items in a pw_multiselect field are re-ordered, the ordering should be maintained after saving the post. However, drag-and-drop seems to generate a JS error, due to interference by Yoast SEO code, meaning the ordering is not maintained.

I've reported the issue to cmb-field-select (https://github.com/mustardBees/cmb-field-select2/issues/52) but it looks like the issue is Yoast code interfering with that plugin's markup.

How can we reproduce this behavior?

1. In a vanilla WP installation, install CMB2, cmb-field-select2, and Yoast SEO plugins.
2. In a custom theme, define a pw_multiselect field as per instructions (https://github.com/mustardBees/cmb-field-select2#usage)
3. Select some options for that field and save post
4. Drag-and-drop items to re-order (watch console for error). Drag-and-drop works, but when the post is saved, the ordering isn't maintained.

Technical info

What seems to be happening is that code in Yoast's select2.full.min.js is rewriting list elements for Select2 elements, and the cmb-field-select element is getting caught up in this. The elements end up with data-select2-id attributes, but the ID in the data that the cmb-field-select's script.js (line 21) is looking for is gone, creating a JS error when a drag-and-drop happens.

• If relevant, which editor is affected (or editors):
• [x] Classic Editor
• [x] Gutenberg
• [x] Classic Editor plugin

• Which browser is affected (or browsers):
• [x] Chrome
• [x] Firefox
• [x] Safari
• [ ] Other

Used versions

• WordPress version: 5.7.2
• Yoast SEO version: 16.6
• Classic Editor plugin version: 1.6
• Relevant plugins in case of a bug: CMB2, cmb-field-select
• Tested with theme: Twenty Twenty (simple child theme)

[adriantoll]

Hi @Djennez. Any news on this? We're experiencing this issue too.

[lorenzolago]

Hi guys, as a quick workaround, I adapted a solution found for an identical problem between a version of ACF PRO and Yoast (original post here: https://support.advancedcustomfields.com/forums/topic/acf-yoast-seo-conflict-issue/ ).

Here is my adapted code, you want to add it in your functions.php or similar:

function fixYoastAndCMBmultiselect() {  
    wp_deregister_script( 'yoast-seo-select2' );
    wp_dequeue_script( 'yoast-seo-select2' );

    wp_enqueue_script( 'yoast-seo-select2', '/wp-content/plugins/cmb2-fields-select2/js/select2.min.js', [ 'jquery' ]);
}

add_action( 'admin_enqueue_scripts', 'fixYoastAndCMBmultiselect', 99 );

Please be aware that this is a workaround, I'm not 100% sure it doesn't break some functionalities of Yoast I'm not aware of!

[gyrus]

@lorenzolago Many thanks, that works!

A minor correction for anyone else coming here, the path should be /wp-content/plugins/cmb-field-select2/js/select2.min.js.

Also, I found a little extra admin CSS was necessary:

.select2-selection__choice {
    padding-left: 25px !important;
}

But much appreciated. I'll not close this issue since it's a workaround, though.