Это поведение похоже на баг в md-select
.
После просмотра исходного кода, было выявлено что в функции по поиску и выбору правильного option
используется такая строчка:
searchStr += String.fromCharCode(e.keyCode);
Весь код функции:
var searchStr = '';
var clearSearchTimeout, optNodes, optText;
var CLEAR_SEARCH_AFTER = 300;
self.optNodeForKeyboardSearch = function(e) {
clearSearchTimeout && clearTimeout(clearSearchTimeout);
clearSearchTimeout = setTimeout(function() {
clearSearchTimeout = undefined;
searchStr = '';
optText = undefined;
optNodes = undefined;
}, CLEAR_SEARCH_AFTER);
searchStr += String.fromCharCode(e.keyCode);//здесь преобразование из клавиши в символ
var search = new RegExp('^' + searchStr, 'i');
if (!optNodes) {
optNodes = $element.find('md-option');
optText = new Array(optNodes.length);
angular.forEach(optNodes, function(el, i) {
optText[i] = el.textContent.trim();
});
}
for (var i = 0; i < optText.length; ++i) {
if (search.test(optText[i])) {//Поиск элемента
return optNodes[i];
}
}
};
Как видно, они не правильно преобразовывают код клавиши в символ (букву).
Можете зависти issue на github
UPDATE
Если Вам необходимо использовать md-select
уже сейчас, до обновления исходного кода angular-material
, то можете использовать директивы, которая пофиксит данное поведение.
Пример на codepen.
angular.module('myApp', ['ngMaterial'])
.controller('harvestController', function($scope) {
$scope.cur1 = {
val: null
};
$scope.cur2 = null;
$scope.logKeyCode = function(e) {
console.log(e.keyCode);
console.log(String.fromCharCode(e.keyCode));
console.log(e);
var p = 0;
}
$scope.harvest1 = [{
id: 0,
name: 'абрикос'
}, {
id: 1,
name: 'банан'
}, {
id: 2,
name: 'виноград'
}, {
id: 3,
name: 'груша'
}, {
id: 4,
name: 'дыня'
}];
$scope.harvest2 = [{
id: 0,
name: 'apricot'
}, {
id: 1,
name: 'banana'
}, {
id: 2,
name: 'grapes'
}, {
id: 3,
name: 'melon'
}, {
id: 4,
name: 'pear'
}];
})
.directive('fixMdSelect', function() {
return {
restrict: "A",
controller: function($scope) {
$scope.addNode = function(node) {
$scope.nodes.push(node);
};
$scope.nodes = [];
},
link: function(scope, elem, attr) {
elem.find('md-content').bind('keydown', function(event) {
var search = new RegExp('^' + event.key, 'i');
for (var i = 0; i < scope.nodes.length; i++) {
var node = scope.nodes[i];
if (search.test(node.text())) {
node[0].focus();
}
}
});
},
};
})
.directive('fixMdOption', function() {
return {
restrict: "A",
require: "^^fixMdSelect",
scope:true,
link: function(scope, elem, attr, fixMdSelect) {
scope.$parent.addNode(elem);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc1/angular-material.js"></script>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc1/angular-material.css" rel="stylesheet">
<link href="https://material.angularjs.org/1.1.0-rc1/docs.css" rel="stylesheet">
<body ng-app="myApp" ng-cloak>
<div ng-controller="harvestController" layout="column" layout-align="center center">
<p>При вводе первой русской буквы не находит и не выделяет найденное знчение:</p>
<input ng-model='cur1.val'>
<md-select fix-md-select placeholder="Найдите фрукт" ng-model="cur1.val" style="width:200px;">
<md-option fix-md-option ng-value="fruit.id" ng-repeat="fruit in harvest1">{{fruit.name}}</md-option>
</md-select>
{{cur1}}
<p>При вводе первой английской буквы находит и выделяет найденное значение: </p>
<md-select placeholder="Find fruit" ng-model="cur2" style="width:200px;">
<md-option ng-value="fruit.id" ng-repeat="fruit in harvest2">{{fruit.name}}</md-option>
</md-select>
</div>
</body>