17.6 reintroduced styling of Select2 that conflicts with other plugins

[rastitkac]

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

Please give us a description of what happened.

After updating from 17.5 to 17.6 appearance of Select2 fields of ACF Pro in backend is broken. This happens only with 17.6. I can confirm it's not an issue in 17.5 and it has been reported that it's not an issue as far as 17.3.

Original report, with some feedback: here

Please describe what you expected to happen and why.

I expect custom styles for this plugin not to interfere with styles of other plugins.

How can we reproduce this behavior?

1. Install and activate Yoast SEO 17.6
2. Install and activate ACF Pro 5.11
3. Create a group with a custom field that uses Select2 (like Post Object with multiple values allowed)
4. Set the field group to appear if post type is posts
5. Create new or edit existing post
6. Look and try to edit the custom field just created in step 3
7. You'll notice the style is broken: like in this picture or in this picture

Technical info

• If relevant, which editor is affected (or editors):

• [ ] Classic Editor
• [ ] Gutenberg
• [ ] Classic Editor plugin

• Which browser is affected (or browsers):

• [x] Chrome
• [x] Firefox
• [x] Safari
• [ ] Other

Used versions

• WordPress version: 5.8.2
• Yoast SEO version: 17.6
• Gutenberg plugin version:
• Classic Editor plugin version:
• Relevant plugins in case of a bug: Advanced Custom Fields Pro 5.11 (reportedly with 5.10.2 as well)

• Tested with theme: custom and twentytwentyone (not relevant)

[Djennez]

This looks closely related to, if not the same as, https://github.com/Yoast/wordpress-seo/issues/17171.

Can you confirm this? And share the errors that you're running into?

[chrishoughton]

It’s different from https://github.com/Yoast/wordpress-seo/issues/17171

It’s a CSS issue creating a visual bug. My example was linked above and on the original wordpress.org thread, screenshot below

https://prnt.sc/2012hcx

You can replicate with any ACF post object and the most recent version of Yoast.

[rastitkac]

As @chrishoughton stated this issue is different from #17171 I shared the errors as screenshots in my original post above because they are CSS issues. I cannot reproduce problems mentioned in #17171.

[Djennez]

Confirmed the issue. Did not check if it's up to us to fix, or up to ACF.

[rastitkac]

I just created the issue at the official acf repo https://github.com/AdvancedCustomFields/acf/issues/581 as requested by @michaelbriantina here

[igorartzona]

The problem is relevant for woocommerce too

[lgladdy]

Hey 👋 Liam from the ACF team here.

This issue was caused by the update to select2 4.1-rc0 in Yoast 17.6. We tried to solve this issue in ACF 5.11.2 by bumping our version of select2 to the same so we'd get the same DOM structure, but that ended up causing too many issues with other plugins that load select2 <4.1 first (as it seems select2 will just use the first registered version of select2) - or they include select2.min.js rather than select2.full.min.js like we both did.

Either way, in ACF 5.11.4 we dropped back to select 4.0.13 and instead added some very specific targeting to detect the new markup used in select2 4.1 if a user has Yoast loaded too, and try and make our boxes look as similar as we can to <4.1 so this issue specifically with an ACF conflict should be fixed - although I suspect the same issues with other plugins (like ProfilePress) loading their lite versions of select2 will also affect Yoast.

[Ahammed-Navas]

Hello,

Am also facing the same issue. There is a conflict with the Yoast Seo plugin and the “WooCommerce Composite Products” plugin. When we tried to check the WooCommerce product edit section, it shows as broken.https://prnt.sc/2392ug6

After troubleshooting the issue, I found that the Yoast plugin(latest version) was active on the site at the time the issue was occurring, along with the “WooCommerce Composite Products” plugin.

If I roll back the Yoast plugin to version 17.5, then the issue is resolved. Therefore, it is the Yoast plugin latest version that is causing the issue.

I hope you guys resolve the issue as soon as possible.

Thank you.

[Ahammed-Navas]

Hello,

Is there any Update on the Thread, the conflict with the Yoast Seo plugin and the “WooCommerce Composite Products” plugin?

I hope you guys resolve the issue as soon as possible.

Thank you.

[corentin-gautier]

Hi @Djennez @lgladdy ,

Facing this bug too, the issue with the select2 lib being loaded by multiple plugins is very problematic as it makes the admin UI look broken for the end user which is ... really not ideal and looks unprofessional. I would appreciate some effort on this issue given the widespread use of select2 and the widespread use of the plugins that use it !

Why did you include a RC version of select2 ?

Thanks

[ronilaukkarinen]

Just to chime in, just noticed the same bug. For us it only happens in the WooCommerce product attributes.

[coleh33]

I also am noticing this. I use the Meta Box plugin which uses the select 2 library and some fields are now messed up. I reached out to the Meta Box plugin team and they kinda pushed back saying it was on Yoast to resolve. Unfortunately this may become an issue between plugin developers pointing fingers for the other to make compatible.

[Djennez]

I've put this issue on top of our internal bugfix suggestions. Hope to be able to give you an update soon.

[suascat]

+1 https://wordpress.org/support/topic/select2-styling-conflict-with-woocommerce-attribute-buttons/

[suascat]

+1 https://wordpress.org/support/topic/attribute-field-problem/

[ronilaukkarinen]

Any progress? @Djennez

[Djennez]

@ronilaukkarinen I am no longer fully involved in these issues, but I do not think there has been any priority towards this issue. @iamazik can you check and report back on the status of this?

[mmikhan]

Thank you for your continued patience, everyone. I have deep-dived into this today and could no longer reproduce the issue. I can confirm that the Select2 input fields with multiple values allowed option work fine as expected. The following screenshots will show you what I am currently seeing.

So, if anyone of you can still reproduce the issue, can you please record a quick video showing the exact settings to create the relevant ACF Pro field and how to reproduce the problem so I can deep dive into this again?

[ronilaukkarinen]

Oh, right. We see this is fixed in production indeed. Thanks to everyone involved!

[mmikhan]

Great, thanks for your confirmation. In that case, I am going to close the issue!