2

I have this dropdown defined on template 

<select id="{{vm.field.id}}"
        kendo-drop-down-list
        k-data-source="vm.field.options"
        k-data-value-field="'code'"
        k-data-text-field="'description'"
        k-index="vm.selectedIndex"
        k-ng-model="vm.field.value"
        k-value-primitive="true"
        k-options="vm.field.config"
        ng-blur="vm.unfocusField()"
        ng-focus="vm.focusField()"
        k-on-change="vm.onValueChange()">
</select>

As you can see, I have ng-focus set (targeting to vm.focusField() function), this event is rightly applied and function triggered when I focus field by clicking directly on it with the mouse. But when this field is focused by tabbing (tab keyboard) from a previous field on form list. When I press tab, the field gets "focused" since in html the class 'k-state-focused' is added to element and I can use the up and down cursor buttons to change dropdownlist value, BUT, the ng-focus binded function is not executed. In resume this ng-focus words focusing by click, but not executed focusing by tab keyboard. I proved this function is not being called in this situation using developer tools and breakpoints on binded function

maya.js
  • 1,147
  • 12
  • 25
Edward Calle
  • 21
  • 4
  • *ng-focus binded function is not executed* is it `vm.focusField()` ? – Searching Feb 20 '17 at 23:11
  • I've tried editing one of telerik's fiddles and ng-focus worked perfectly with tabbing and mouse clicks. Could you provide a simple code snippet on fiddle or something please. – qwerty_igor Feb 20 '17 at 23:13

1 Answers1

0

I received this code sample from the telerik support team, which helped solve my problem.

 <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.blueopal.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.blueopal.mobile.min.css" />

        <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="example" ng-app="KendoDemos">
        <div class="demo-section k-content" ng-controller="MyCtrl">
        <h4>Static data</h4>
        <select kendo-drop-down-list="mydropdown">
          <option>Albania</option>
          <option>Andorra</option>
          <option>Armenia</option>
          <option>Austria</option>
        </select>
    </div>
    </div>
    <script>
       var app = angular.module("KendoDemos", [ "kendo.directives" ])
          .controller("MyCtrl", function($scope){  
              $scope.$on("kendoWidgetCreated", function(event, widget){
                if (widget === $scope.mydropdown) {
                  widget.wrapper.on("focus", $scope.onFocus);
                  widget.wrapper.on("blur", $scope.onBlur);
                }
              });

            $scope.onFocus = function(){
                console.log("Kendo DropDownList focused!");
            };

            $scope.onBlur = function(){
                console.log("Kendo DropDownList blured!");
            };
          });

    </script>
Edward Calle
  • 21
  • 4