Are there any errors being thrown?

No, no errors. It is just that those dropdowns that is set to be filtered by a value in another dropdown is reset to an empty value even though the value i set ok. The filtering of the values is also working as supposed so those values available is correct.

I admit that I don't fully understand the setup and functionality of this but the main error seems to be setting the linked dropdown value to null. To solve this I added a variable to hold the previous set value and then check this value and only reset the linked dropdown if the value has changed. Perhaps there might be a better solution for this but this solves the issue.

_updateRegionDropdown: function (country) {    
    if (country !== "" && this.previousCountry === "") {
                this.previousCountry = country;
            }
            // Clear the current value
            if (country !== this.previousCountry) {
                this.regionDropdown.set("value", null);
                this.previousCountry = country;
            }

            // Set the filter
            this.regionDropdown.set("filter", function (region) {
                
                return region.value.indexOf(country) === 0;
            });
}

Thanks for posting on this @Tobias!

I'm working with a project built on Epi 10.8 and am a dojo newb, so both the Country Region blog post you mentioned and your post here have been super helpful.

For some reason your fix didn't 100% work for me, but I ended up doing something similiar:

_updateRegionDropdown: function (country) { 
    
    //check if value of this.previousCountry is null/empty/undefined
    if (country !== "" && this.previousCountry) {
        this.previousCountry = country;
    }
  
    ...rest is the same...
}

Maybe I initialized the previousCountry variable a little differently than you had, but this did the trick for me. 

James from 11.x-land here with another update!

Neither of the above solutions worked for me directly, but it lead me to the right way of diagnosing the problem.

In my instance, the _updateRegionDropdown method was running twice - once before the dropdowns were properly initialized and once after. In the before case, the value for country came through as null. This cleared the Region dropdown even when I removed all of the conditions above. When that would happen, the following code would execute with the value for country as null.

this.regionDropdown.set("filter", function (region) {
    // Oops, the region code is prefixed with country code, for the simplicity
    return region.value.indexOf(country) === 0;
});

So it's checking each region option for if position 0 === null. Which is never the case. The filter reset was removing all options on the first go, then adding some back in on the second (when country had a usable vallue).

A simple null check resolved the issue. Here's my complete JS file. I also reordered some conditionals to cascade correctly and renamed some things to resolve conflicts in Foundation.

define([
    "dojo/_base/declare",
    "dojo/_base/lang",

    "epi/shell/layout/SimpleContainer"
],
    function (
        declare,
        lang,

        SimpleContainer
    ) {

        return declare([SimpleContainer], {
            countryDropdown: null,
            regionDropdown: null,
            previousCountry: null,

            addChild: function (child) {
                // Summar: Add a widget to the container

                this.inherited(arguments);

                if (child.name.indexOf("region.countryRegion") >= 0) {
                    // If it's the region drop down list
                    this.regionDropdown = child;

                    // Update the region drop down
                    this._updateRegionDropdown(this.countryDropdown.value);
                }
                else if (child.name.indexOf("region.country") >= 0) {
                    // If it's the country drop down list
                    this.countryDropdown = child;

                    // Connect to change event to update the region drop down list
                    this.own(this.countryDropdown.on("change", lang.hitch(this, this._updateRegionDropdown)));
                }
            },

            _updateRegionDropdown: function(country) {
                if (country === null) return;
                // Summary: Update the region drop down list according to the selected country
                
                if (this.previousCountry === null) {
                    this.previousCountry = country;
                }

                if (country !== this.previousCountry) {
                    this.regionDropdown.set("value", null);
                    this.previousCountry = country;
                }

                // Set the filter
                this.regionDropdown.set("filter", function (region) {
                    // Oops, the region code is prefixed with country code, for the simplicity
                    return region.value.indexOf(country) === 0;
                });
            }
        });
    });