Linked dropdown does not display value

Vote:
 

Having used this setup on o website since it ran 7.5 (http://world.episerver.com/blogs/Duong-Nguyen/Dates/2014/1/Country-Region-drop-down-lists-in-All-properties-mode/) and it has worked great. Now the site is updated to 10.0.1 and now we see a bug in this behaviour. When selecting the first dropdown the values is correctly filtered in the second. But when selecting a value in the second and publishing the page/block, the value in the second dropdown is reset to just show the empty value text. Loading the page/block and looking at the properties shows that the correct value is saved but it's not represented in the all properties view. Is there any changes in the upgrade that affects this and how to figuure that out?

#177409
Apr 11, 2017 8:02
Vote:
 

Are there any errors being thrown?

#177496
Apr 12, 2017 22:16
Vote:
 

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.

#177499
Apr 13, 2017 7:51
Vote:
 

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;
            });
}
#177501
Apr 13, 2017 8:43
Vote:
 

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. 

#205483
Edited, Jul 12, 2019 23:07
Vote:
 

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;
                });
            }
        });
    });
#222416
May 05, 2020 15:42
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.