В раскрывающемся списке Kendo не выполняется функция привязки ng-focus

У меня есть этот раскрывающийся список на шаблоне

<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>

Как вы можете видеть, у меня установлен ng-focus (нацеливание на функцию vm.focusField()), это событие правильно применяется и функция срабатывает, когда я фокусирую поле, щелкая мышью по нему. Но когда это поле фокусируется с помощью табуляции (вкладка клавиатуры) из предыдущего поля в списке форм. Когда я нажимаю tab, поле становится "сфокусированным", так как в html к элементу добавляется класс "k-state-focus", и я могу использовать кнопки курсора вверх и вниз для изменения значения выпадающего списка, НО, привязанной к ng-focus функции не выполняется. В резюме это нг-фокусировка слов с фокусировкой по клику, но не выполняется фокусировка с помощью вкладки клавиатуры. Я доказал, что эта функция не вызывается в этой ситуации с использованием инструментов разработчика и точек останова на связанной функции

Источник

1 ответ

Я получил этот пример кода от службы поддержки Telerik, который помог решить мою проблему.

 <!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>
Источник
Другие вопросы по тегам