CODEWITHSUNDEEP
angularjsdomangularjs-directiveautocompleteangular-material
Asqan
Asqan

Reputation: 4489

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

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-.enter image description here

Upvotes: 1

Views: 2380

Answers (1)

Mohit Adwani
Mohit Adwani

Reputation: 519

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
    }

Upvotes: 2

Related Questions