Clear button in AutoComplete of Angular Material blocks all the DOM elements - angularjs

Question

Yes, this is very rare situation but somehow, if i use the autocomplete as follows, i get all the dom elements blocked and i cant interact anymore with an element from my page.
This is the html-part:
<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>
and this is the corresponding parts from my controller:
$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: every functionality works fine and without error. Just clicking the clear button - as shown in the following image- causes this problem -tested in last versions of chrome and mozilla-.

Answer 1

There is an issue posted on github regarding this.
You can check it out here.
It is resolved in the update 0.10.1-rc4.
Update your angular-material to master.
Temporary Workaround:
CSS:
.md-scroll-mask{
position: initial
}