Angular Material : chips md-autocomplete never hide suggestions menu

Question

I want to have an input with autocomplete suggestions in a chrome extension. I face a very weird issue.

Once I get the focus on my input, the suggestions menu is opened well with good values but then if I focus anywhere else, the suggestion menu never hide, I still can see an empty suggestion menu opened under my first input. It just never hides himself.

All the other functionalities are working well.

I tried this without effect : Angular Material: md-autocomplete - how to hide md-autocomplete-suggestions on Enter event?

Here's my html :

<md-chips ng-model="ctrl.newTags" 
          md-autocomplete-snap 
          md-transform-chip="ctrl.newVeg($chip)" 
          md-require-match="false">
    <md-autocomplete id="Auto" 
                     md-selected-item="ctrl.selectedItem" 
                     md-search-text="ctrl.searchText" 
                     md-items="item in ctrl.querySearch(ctrl.searchText)" 
                     md-item-text="item.name" 
                     placeholder="Enter a tag">
        <span md-highlight-text="ctrl.searchText">{{item.value}}</span>
    </md-autocomplete>
    <md-chip-template>
        <span>
            <strong>{{$chip.value}}</strong>
        </span>
    </md-chip-template>
</md-chips>

And my JS code :

self.newVeg = function(tag) {
    if (angular.isObject(tag)) {
        return tag.value;
    } else if (angular.isString(tag)) {
        return tag;
    }
};
self.querySearch = function(search) {
    search = search || "";
    return self.existingTags.filter(function(vO) {
        return !search || vO.value.toLowerCase().indexOf(search.toLowerCase()) >= 0 ;
    });
};

I'm asking myself if it doesn't work because of the fact it's in a chrome extension but it looks too simple...

The picture of my problem just to be clear :

Thanks if anyone knows why or get the same mistake !

Matt.

Answer 1

I had the same problem using angular-material in a chrome extension. Adding this to my css fixed it:

.ng-hide {
display: none;
}

Incidentally, I also had issues with the ng-show directive not working in my chrome extension, and adding this css class appeared to solve those issues as well.

Answer 2

新版角材解决了问题。