Select/Dropdown for country on the block checkout not displaying an arrow indicator.

[stuartduff]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

In previous versions of the block checkout within the country field, there seems to have been a dropdown indicator arrow which was displayed. However, it seems like that no longer displays.

Expected behavior

Usually, within a select or dropdown field, we'd see an indicator on the field. This screenshot below is from a developer blog post from 2020.

https://developer.woocommerce.com/2020/05/27/available-for-testing-a-block-based-woocommerce-cart-and-checkout/

Actual behavior

Currently, there is no select indicator within the latest version of the WooCommerce block checkout.

I'm not sure if this was an intentional change at any point in time. It was, however, highlighted by a forum user whom we've opened this report for.

https://wordpress.org/support/topic/the-down-arrow-is-not-showing-for-countries-regions-field-in-wcs-block/

Steps to reproduce

1. Add a product to cart.
2. Visit a page wit the block checkout located on it

WordPress Environment

WordPress v6.1.1 & WooCommerce v7.5.1

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[opr]

Hi @stuartduff - thanks for opening this report.

Actually it looks like this was removed in August 2021 (version 5.7.0) because of #4369

The combobox we use instead comes from Gutenberg and does not have an arrow.

As for a solution to re-add it, it might be possible with CSS, however the element is an input so if you'd try to render the arrow in a before or after pseudo-element it wouldn't work as input can't have these.

You'd need to add it to the combobox container, like so (feel free to modify colours and sizes to suit):

.wc-block-components-country-input .components-base-control:after {
    height: 0.5em;
    width: 0.5em;
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    border-left: 1px solid grey;
    border-bottom: 1px solid grey;
    transform: translateY(-50%) rotate(-45deg);
}

Please note this is a workaround and we won't be able to provide ongoing support for this solution.