Magento 2: Country select field in checkout shows two empty options

Question

While I was working on a Magento 2 version 2.1.12 webshop I encountered a bug in the country picker field on the checkout page. As you can see on the picture below there are two empty options. I was wondering if this is a known bug on this version of Magento and if there is a possible solution?

With kind regards,

Remco Hendriks

Answer 1

For anyone with the same issue, I made a dirty solution with Jquery and CSS. Since my checkout loads dynamically, the class does not exist at first therefore I made an interval check which stops the function when the class loaded exists.

The Jquery

$(document).ready(function(){
    if (!$("select[name='country_id']").hasClass("loaded")) {   
        setInterval(function(){ 
            $i = 0;
            $("select[name='country_id'] > option").each(function() {
                $("select[name='country_id']").addClass("loaded")
                $(this).attr("name", ($i++) + "-option");
            });
        }, 1000);
    }
});

The CSS

option[name="0-option"], option[name="1-option"] {
    display:none !important;
}

Answer 2

Thank you Remco Hendriks

I used this solution

if (!$("select[name='country_id']").hasClass("loaded")) {   
    setInterval(function(){ 
        $("select[name='country_id'] > option").each(function() {
            $("select[name='country_id']").addClass("loaded")
            if($(this).val()==undefined || $(this).val()==""){
                $(this).hide();
            }
        });
    }, 1000);
}