ComboBox refresh method selects an item

[Andrew]

I have a question about some code inside the refresh() method of the ComboBox widget. Specifically, the following lines:

if (state !== STATE_FILTER && !that._fetch) {
    that._selectItem();
}

In my application, the dataSource of a combobox needs to change based on the user making various choices. In this case, we use ComboBox.setDataSource() to update the combo. When the user clicks the dropdown button to open the popup, the combo does a refresh which causes the above code to run. That code selects the first item in the data, even though "suggest" and "highlightFirst" are both false. Moreover, the "change" event is not fired, so the combo shows a selection, but our application code is not notified.

Why does refresh() select an item? Shouldn't it just rebuild the options list but keep other state in the control unchanged?

Thanks,
AHG

[Georgi Krustev]

Hello Andrew,

The refresh method tries to select the correct item, because this is the change event handler of the data source. Once the change event is raised, the data source is bound and we can safely select the correct item. Also as the data source allows to change data manually/MVVM the correct place to select the item is in the data source change event. If you need to clear the value before set new data source then just use this code snippet:

combobox.value("");
combobox.setDataSource(/* new data source */);

Regards,
Georgi Krustev
Telerik

[Andrew]

Thanks for the info Georgi.

I think I found out what the underlying problem was (for us). When the ComboBox starts out, is has no value (no selection). In terms of the widget DOM, the "selectedIndex" attribute of the combo's <select> equals -1.
When we load in some new data, using the DataSource.data() method for example, that fires the change event, which calls the refresh() method on the ComboBox. That internally calls kendo.ui.Select._options, passing in the new data, and it populates the option elements for the select. The last line of that method, however, changes the selectedIndex property to zero.

element.html(options);
element[0].selectedIndex = selectedIndex === -1 ? 0 : selectedIndex;

This causes the refresh() method to put the text of the first option into the text box, because _selectItem uses "that._accessor()" to pull the value out of the first <option> element.
So the problem is that the ComboBox is changing the value as part of loading data/refresh. Why does the selectedIndex get changed from -1 to zero?

Thanks,
Andrew

[Georgi Krustev]

Hello again Andrew,

Thank you getting back to us and for drawing our attention to this issue. Indeed, the combobox should not set the selectedIndex to 0 if it was -1. This logic is applicable only for the dropdownlist, which always should have a selected item. We will address this problem in the next official release of Kendo UI due in the middle of January.
As a token of gratitude for your involvement I am updated your Telerik points. 

Regards,
Georgi Krustev
Telerik