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

6 posts, 0 answers
  1. Kevin
    Kevin  avatar
    5 posts
    Member since:
    Jun 2012

    Posted 02 Jun Link to this post

    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);       
            }        
        }

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 06 Jun Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Kevin
    Kevin  avatar
    5 posts
    Member since:
    Jun 2012

    Posted 13 Jun in reply to Dimiter Topalov Link to this post

    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.

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 15 Jun Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  6. Kevin
    Kevin  avatar
    5 posts
    Member since:
    Jun 2012

    Posted 21 Jun in reply to Dimiter Topalov Link to this post

    Hello, 

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

  7. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 23 Jun Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready