Angular Material 的 AutoComplete 中的清除按钮会阻止所有 DOM 元素

Question

是的，这是非常罕见的情况，但不知何故，如果我按如下方式使用自动完成功能，我会阻止所有 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 的最新版本中测试过-.

Answer 1

在 github 上发布了一个关于此的问题。 您可以查看here。

在更新 0.10.1-rc4 中已解决。

将您的角度材料更新为掌握。

临时解决方法：

CSS：

    .md-scroll-mask{
        position: initial
    }