Select2 issue

Hi @japenz

As of now, this is not a known issue. I’ve even tried to recreate the problem on both my old and new WordPress sites using the Storefront theme and WooCommerce plugin only. However, we appreciate you bringing this to our attention.

It might be a conflict with your theme or another plugin that is causing this. I would recommend you to temporarily switch to a default theme (like Storefront) and disable all other plugins to see if the problem persists. If the issue is resolved, you can reactivate your theme and plugins one by one to identify the source of the conflict. You can find a detailed explanation of conducting a conflict test here.

If this doesn’t work, please share more details including a screenshot or a video showing the issue on your end.

For screenshots, you may use https://snipboard.io, and record videos with https://www.loom.com/ – please follow the instructions on that page, then paste the URL in this thread.

Let us know how that goes. Looking forward to helping you.

Hi @shameemreza,

Thank you for looking at this for me ??

Here are a couple of screenshots of what I’m seeing:

Hovering over New Zealand in the Country / Region dropdown

Hovering over Australia in the Country / Region dropdown

So basically when I hover over a country it disappears, though is still selectable.
I’m guessing the text is white on hover perhaps?

Tested with PHP 8.2 / 8.0 and 7.4 with only Woocommerce and Storefront theme active, hosted on WP Engine.

Also, and I’m not sure if it’s in anyway related, but all the Woocommerce tabs and highlights… basically anything that used to be the Woocommerce purple colour, is now the WordPress theme colours (so default blue in my case)… I believe this is an intentional update, but thought I should check.

Thanks again for your help!

Ooh actually, looking at the elements in Chrome I see this when hovering over the dropdown selection:

.wp-admin.wc-wp-version-gte-53 .select2-container--default .select2-results__option--highlighted[aria-selected], .wp-admin.wc-wp-version-gte-53 .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--wp-admin-theme-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #0073aa;
    color: #fff;
}

These are coming from:
/wp-content/plugins/woocommerce/assets/css/admin.css?ver=8.1.1

So seems like the background-color: var(--wp-admin-theme-color); is either replacing the default background colour with white, or stopping a background colour from showing… while at the same time allowing the the text (color: #fff;) to display as white… effectively making it invisible on the white background.

Hi @japenz

We have been able to reproduce this issue not with the WooCommerce core, but with some plugins.

Thanks for sharing those screenshots – can you provide a little more detail on which screens they were captured from? Are these core WooCommerce selection pages, or plugin-created selection pages?

Thanks for the additional information to help us track this down!

Hi @lynnjat7

Glad you were able to track it down!

So these screenshots are from the user edit pages, when editing a users billing and shipping details from the admin side.

Hope this helps, let me know if you need any additional information ??

• This reply was modified 1 year, 1 month ago by JapeNZ.

Hi @japenz,

Thanks for that added detail, it was very helpful! I’ve been able to easily replicate this issue now with 8.2.0 of WooCommerce – it also happens with 8.1.0 and anything in between.

I’ve reported it as a bug to our development team; our github is public so you can track progress on the bug here:
https://github.com/woocommerce/woocommerce/issues/40706

Downgrading to 8.0.3 is a workaround if this is really causing you grief. If you want to downgrade, you can download the zip file for version 8.0.3 here:
https://github.com/woocommerce/woocommerce/releases/tag/8.0.3

You can just go under Plugins > Add New and upload the file, no need to remove the current version you have installed or anything. It will detect the downgrade and ask you to confirm and you can click to overwrite your current version with this older version.

In the meantime, please do keep an eye on the github bug report for progress on this issue and it should be noted in the release notes when it’s fixed. There’s no firm ETA but this looks like a pretty small fix so I’d expect it to be resolved shortly.

Thanks for bringing it to our attention!