Angular Material 的自动完成中的清除按钮会阻止所有 DOM 元素
Clear button in AutoComplete of Angular Material blocks all the DOM elements
是的,这是非常罕见的情况,但不知何故,如果我按如下方式使用自动完成功能,我会阻止所有 dom 元素,并且我无法再与页面中的元素进行交互。
这是 html 部分:
<md-autocomplete style="background-color:white; height:10px;"
md-selected-item="selectedItem"
md-search-text-change="searchTextChange(searchText)"
md-search-text="searchText"
md-selected-item-change="selectedItemChange(item)"
md-items="item in querySearch(searchText) | orderBy:'text'"
md-item-text="item.text"
md-min-length="0"
placeholder="Filteren op tag"
md-menu-class="autocomplete-custom-template">
<md-item-template style="background-color:white;">
<span class="select-title">
<!--<md-icon md-svg-icon="selectboxIcon.svg"></md-icon>-->
<span class="item-tags"> {{item.text}} </span>
</span>
</md-item-template>
</md-autocomplete>
这是我控制器的相应部分:
$scope.querySearch = function (query) {
var results = query ? $scope.allTags.filter($scope.createFilterFor(query)) : $scope.allTags;
return results;
}
$scope.createFilterFor = function (query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(item) {
console.log(item);
var itemName = angular.lowercase(angular.lowercase(item.text));
return (itemName.indexOf(lowercaseQuery) === 0);
};
}
$scope.searchTextChange = function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
$scope.selectedItemChange = function selectedItemChange(item) {
console.log("selected");
console.log(item);
}
ps:每个功能都运行良好且没有错误。只需单击清除按钮 - 如下图所示 - 会导致此问题 - 在 chrome 和 mozilla 的最新版本中进行了测试-.
github 上发布了一个与此相关的问题。
你可以看看here.
在0.10.1-rc4更新中解决。
更新你的 angular-material 到 master。
临时解决方法:
CSS:
.md-scroll-mask{
position: initial
}
是的,这是非常罕见的情况,但不知何故,如果我按如下方式使用自动完成功能,我会阻止所有 dom 元素,并且我无法再与页面中的元素进行交互。
这是 html 部分:
<md-autocomplete style="background-color:white; height:10px;"
md-selected-item="selectedItem"
md-search-text-change="searchTextChange(searchText)"
md-search-text="searchText"
md-selected-item-change="selectedItemChange(item)"
md-items="item in querySearch(searchText) | orderBy:'text'"
md-item-text="item.text"
md-min-length="0"
placeholder="Filteren op tag"
md-menu-class="autocomplete-custom-template">
<md-item-template style="background-color:white;">
<span class="select-title">
<!--<md-icon md-svg-icon="selectboxIcon.svg"></md-icon>-->
<span class="item-tags"> {{item.text}} </span>
</span>
</md-item-template>
</md-autocomplete>
这是我控制器的相应部分:
$scope.querySearch = function (query) {
var results = query ? $scope.allTags.filter($scope.createFilterFor(query)) : $scope.allTags;
return results;
}
$scope.createFilterFor = function (query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(item) {
console.log(item);
var itemName = angular.lowercase(angular.lowercase(item.text));
return (itemName.indexOf(lowercaseQuery) === 0);
};
}
$scope.searchTextChange = function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
$scope.selectedItemChange = function selectedItemChange(item) {
console.log("selected");
console.log(item);
}
ps:每个功能都运行良好且没有错误。只需单击清除按钮 - 如下图所示 - 会导致此问题 - 在 chrome 和 mozilla 的最新版本中进行了测试-.
github 上发布了一个与此相关的问题。 你可以看看here.
在0.10.1-rc4更新中解决。
更新你的 angular-material 到 master。
临时解决方法:
CSS:
.md-scroll-mask{
position: initial
}