When an option is selected by typing in the dropdown, all items are highlighted as if selected, and the last option is selected

[Kevin]

We are using a Kendo comboBox control, which behaves correctly if an option is selected by opening the dropdown list and clicking the option. However, the following behavior is observed when selecting an option by typing in the dropdown box:

-Start typing: a small list of corresponding options appears

-Select one of the options in the list: the seleted option appears in the dropdown box. So far the behavior is correct.

-Click the caret of the dropdown to expand the list of options.This has the result that the selected option changes to the last option of the dropdown list, and all the options are highlighted as if selected. Inspecting the HTML elements shows they all have class k-item and k-state-selected. 

What is causing this behavior? Shouldn't only one item at a time have the class k-state-selected? Is there some option that has to be set? I would be thankful for any help on this.

We are using Kendo UI v2016.1.322, Internet Explorer 11.0.9600.18314, Windows Server 2008 R2 Enterprise.

The HTML uses this directive as shown:

<sc-combo-box type="availYear" sc-filters="AvailYear" placeholder="Select Avail Year" default-value="'2016'"></sc-combo-box>

The comboBox control is built in the directive as follows:

var controller = function ($scope, $attrs, data) {
            var vm = this;
            vm.cbUUID = '';
            vm.type = '';
            vm.defaultValue = $scope.$parent.$eval($attrs['defaultValue']);.

:

:.

            vm.render = function (element, placeholder, type, scFilters) {

                vm.cbUUID = helper.guid().toString();
                vm.filterNames = scFilters.toString();
                vm.filterNames = scFilters.toString();               

                // establish new id for combobox
                element.attr('id', vm.cbUUID);

                // create datasource, establish options used when creating combobox and combine into one 'options' object
                var options = helper.concatObjects(vm.buildDataSource(vm.filterNames), {
                    placeholder: placeholder,
                    value: vm.defaultValue,      
                    filter: 'contains'
                });

                // established combobox options
                element.kendoComboBox(options);
            };
        };

        var directive = {
            link: link,
            require: 'scComboBox',
            restrict: 'E',
            replace: true,
            scope: {
                defaultValue: '='
            },
            controller: ['$scope', '$attrs', 'data', controller],
            template: '<select id="scComboBox" style="width: 100%"></select>'
        };

        return directive;

        function link($scope, $element, $attrs, ctrls) {

            ctrls.render($element, $attrs.placeholder, $attrs.type, $attrs.scFilters);       
        }        
    }

[Dimiter Topalov]

Hello Kevin,

You are right about that only a single selection from the list of items should be allowed.

We could not reproduce the described issue, based on the provided information. Please check out the following demo that works as expected, and apply the necessary adjustments to your implementation:

http://demos.telerik.com/kendo-ui/combobox/angular

If the problem persists, please send us an isolated runnable project, demonstrating the undesired behavior, similar to the aforementioned dojo, or modify the dojo until the problem is reproduced, so we can inspect it further.

Thank you in advance.

Regards,
Dimiter Topalov
Telerik

[Kevin]

Hello,

Thank you for your reply. The linked demo that you provided does not work; in the Chrome console, it has 17 errors.This is also the case for any of the Kendo demos that I looked at under http://demos.telerik.com/kendo-ui. I believe the demos need to be updated.

[Dimiter Topalov]

Hello Kevin,

There might have been some temporary connectivity issue, but all of the demos work as expected on our end:

http://demos.telerik.com/kendo-ui/

http://demos.telerik.com/kendo-ui/combobox/angular

Can you try again, and if the problem persists, please send us a screenshot of the JavaScript errors you are getting in the console.

Let me know if you need further assistance.

Regards,
Dimiter Topalov
Telerik

[Kevin]

Hello, 

The demos do not work for me. I have attached screenshots of the console errors.

[Dimiter Topalov]

Hi Kevin,

The errors suggest that there is some problem loading the jQuery library on your end. You can check the discussed demo in the following dojo:

http://dojo.telerik.com/AyelA

Let me know, if you have any troubles opening it.

Regards,
Dimiter Topalov
Telerik

[Stefan]

I had a similar issue with both the kendo dropdownlist and kendo combobox component. Basically, I found that I was referencing the incorrect ID of my datasource through my dropdownlists dataValueField field. Once i identified the differences I no longer had this problem.

[Dimiter Topalov]

Hello Stefan,

Thank you for sharing your experience with the community.

I am closing this thread now, but it can be always reopened if necessary.

Regards,
Dimiter Topalov
Progress Telerik