DropDownList/ComboBox Cascading with optionLabel BUG 2020-09

[Chris]

Hey

I found a DropDownList Cascading BUG.

HERE WE GO

Reintroduce steps：

．First, jump to DropDownList Cascading Dojo Sample from Kendo UI documentation site：

Dojo link in "Kendo UI for jQuery > DropDownList.cascadeFrom".

cascadeFrom
https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/cascadefrom

Open in Dojo (Kendo UI 2020.3.915)
https://dojo.telerik.com/aVEteTEz

．Second, change the dojo sample code as below：

1.Replace "input id=child" to "select id=child" : 

  <input id="child" />

-->

  <select id="child" style="width: 100%;" >
                <option>S - 6 3/4"</option>
                <option>M - 7 1/4"</option>
                <option>L - 7 1/8"</option>
                <option>XL - 7 5/8"</option>
            </select>


2.Add the optionLabel into "parent" and "child" BOTH : 


$("#parent").kendoDropDownList({


$("#child").kendoDropDownList({


-->


$("#parent").kendoDropDownList({
          optionLabel: "Bug1 here XD",


$("#child").kendoDropDownList({
          optionLabel: "Bug2 here XD",


3.Add code snippet to show the "parent" and "child" before </body> : 



</body>


-->


  <script>

    function callIt(id)
    {
      var dropdownlist = $("#" + id).data("kendoDropDownList");
      var value, text;
      var selectedIndex;
      //
      value = dropdownlist.value();
      text = dropdownlist.text();
      selectedIndex = dropdownlist.select();
      alert(id + "'s index = " + selectedIndex + ", value = '" + value + "', text = '" + text + "' ;D");
    }

  </script>

  <br/>

  <input type="button" value="parent click" onclick="callIt('parent')" />

  <input type="button" value="child click" onclick="callIt('child')" />

</body>

--

Run then first click the 'child click' button, you'll see the wrong result.

--


RESULT

Click parent, child button will show the result.

．parent
（parent's index = 0, value = '', text = 'Bug1 here XD' ;D）
（parent got the correct value）

．child
（child's index = 0, value = 'S - 6 3/4"', text = 'Bug2 here XD' ;D）
（child got the wrong value from <select> element before change the parent）

FUNNY ;D child.select() got the correct index, BUT child.value() got the wrong value.

The main reason is the optionLabel property both of parent/child before change the parent.
I think the ComboBox/DropDownList should check the selected index then return the correct value.

Both Kendo UI 2017.2.621, 2020.3.915 have the same bug.
Browser: Chrome 85.0.4183.83 (32 bit).
OS : Windows 10.


Best regards

Chris

 

 

[Chris]

HI

Another bug.

After test as above.

 

Change all kendoDropDownList to kendoComboBox then run,
ComboBox 'child' will default to first option 'S - 6 3/4"' unexpectedly.

Best regards

Chris

 

 

[Chris]

Fix the problem manually：

Remove the children before initialize DropDownList with cascadeFrom/optionLabel : 

  $("#child").children().remove();

  $("#child").kendoDropDownList({ 

 

Chris

 

 

[Dimitar]

Hi Chris,

ComboBox has no optionLabel property, which is why when changing DropDownList to ComboBox the default item is the first child item for ComboBox initialized from select. I am currently looking at the described DropDownList optionLabel behavior and will write back in this thread as soon as possible.

Regards,
Dimitar
Progress Telerik

[Dimitar]

Hi Chris,

I reviewed the reported DropDownList behavior. When initialized from select element, the optionLabel functionality should be set up as for a select element - StackOverflow - by providing an option tag with empty value - Dojo snippet.

Besides that, initializing a cascading DropDownList from a select element does not allow proper setup for the child DropDownList datasource. Thus, when selecting an item from the parent DropDownList, the child will have no data found. Cascading DropDownLists should be initialized from input elements as shown in cascadeFrom API example.

Regards,
Dimitar
Progress Telerik