select2 / selectWoo dropdown menus out of alignment after update

Hey @63n

Can you share a link to your site (and/or a specific page where you see this)? That way we can check what might be causing it.
Thanks!

• This reply was modified 3 years, 10 months ago by Senff.

It’s happening on the checkout page, but we’re also using a custom script to enqueue the select2/selectWoo script on product pages and catalogue pages…

add_action('wp_enqueue_scripts', 'custom_select_dropdown');
function custom_select_dropdown() {
	if( is_shop() || is_product_category() || is_product_tag() || is_page( 1657 ) || is_product() ) {
		wp_enqueue_style( 'select2');
		wp_enqueue_script( 'selectinit', get_stylesheet_directory_uri() . '/js/select2-init.js', array( 'selectWoo' ), true );        
	}
}

I’ll have to send you login details to be able to add products to your cart and see the checkout page – how should I do that?

On a possibly related note I’ve noticed the page jumps on occasion when opening and closing the dropdown menus.

Hey,

Thank you for sharing these details with us!

Could you confirm the issue is not present if the code mentioned above isn’t being used?

Also, as I wasn’t able to confirm this on my testing site, could you spin up one site so we can check this as well and include some more relevant screenshots please? You can also use a site like this one for a quick setup: https://jurassic.ninja/

Finally, does this occur only on a specific browser or on all of them?

Warm regards,

Yes, I have that custom code in a child theme and have tested with the standard Storefront theme.

I created a site here: https://established-ferret.jurassic.ninja/shop/

The problem still persists on that new site. It seems as though the problem is only happening on Safari for Mac though (version 14.0.2).

Chrome 87.0.4280.141 and Firefox 80.0.1 don’t seem to have the same problem.

• This reply was modified 3 years, 10 months ago by 63N.

Just noticed on Chrome for Windows the same problem is happening. It makes for a frustrating and unintuitive user experience.

Hey @63n

Apologies for not addressing this earlier. Let’s try to figure this out again.

I checked a vanilla Storefront site on my end, but I’m not seeing the same issue as you describe (or maybe I don’t fully understand what the problem is). Here’s how the dropdowns look for me in Safari (though they appear pretty much the same in Chrome and Firefox):

Image link: https://d.pr/i/3bwUQy

If you could either give us access to your own site, or set up another test site where we can see the issue, we can see what might be wrong there.

Something seems to have been updated, because the drop downs seem to line up a bit better now when they open downwards. When they open upwards they still look miss-aligned. See pasteboard here.

The second screen capture shows how the submenu is selected on mouse-up, so it looks like it just opens and then instantly closes unless you click and hold on it. Or you can click at the very top of the select input where the submenu doesn’t cover the input underneath, so it works as expected, staying open with a single click and release of the mouse button. See pasteboard here.

Hey @63n

Something seems to have been updated, because the drop downs seem to line up a bit better now when they open downwards. When they open upwards they still look miss-aligned. See pasteboard here.

I’m not seeing this on my end — this is how it looks on my site:

Image link: https://d.pr/i/iGeuPi

As you can see, the difference is that on your site, the label (“State/County”) is not hidden by the dropdown, whereas on my site it is.

Are you able to share a link to your site or set up another test site where it shows this issue so we can take a look and see what might be the issue?

As mentioned previously I spun up a plain vanilla site with only Storefront and WooCommerce installed and the same issue persists. See test site here: https://smiling-humpback.jurassic.ninja

Edit: Safari version 14.0.3
The screen also jumps sometimes when clicking the select inputs and/or closing the submenu by clicking elsewhere on the page.

https://pasteboard.co/JRTq8B0.gif

• This reply was modified 3 years, 8 months ago by 63N.
• This reply was modified 3 years, 8 months ago by 63N.
• This reply was modified 3 years, 8 months ago by 63N.
• This reply was modified 3 years, 8 months ago by 63N.

Hey @63n

I’ve tried this again on my end, but I’m not seeing this in Safari (version Version 14.0.3), or any browser for that matter:

Image link: https://d.pr/i/qJXbRy

Do you see it in Chrome and Firefox as well (if you have the option to try that), or are you able to check it on another computer by any chance?

Hmm… very strange!

I’ve just checked Chrome and Firefox on Mac (same machine) and on Windows, all seem fine until I log in. When I view that same fresh install in a private window it’s ok, but when I’m logged in the issue comes back. So I’m not sure what’s going on there?

I have the same issue which happened when I upgraded WordPress to 5.7, so the jQuery version is upgraded to 3.x version.

After lots of debugs, I found that the new version of jQuery counts the margin-top of the html element offset (When logged in to WordPress, you have a margin-top of 32px on <html> element to display the admin bar at the top).

That’s why @senff didn’t see any issue. He was not signed in, the admin bar wasn’t there, and he didn’t have a margin-top set to the html element.

We need a fix from WooCommerce in their “selectWoo” file or from jQuery itself.

Hey @aharonach

Excellent find! That does appear to be a bug in WooCommerce indeed, and I’ve filed it as a bug: https://github.com/woocommerce/woocommerce/issues/29457

Hey friends,

This issue was already fixed here and shipped with WooCommerce 5.2.0

I’ll mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.

Cheers

I’m back to having a problem where you have to keep the mouse pressed down to keep the dropdowns open, which is different to what happened pefore.

This did seem to get fixed when the alignment issue was fixed, but now I’m back to having the the selct dropdown dissapearing on mouse-up.