md-chips and md-autocomplete input field

Question

When user enters an input with md-chips and the focus is removed the entry is still there. is there a way to delete any entry that is not a chip once the focus is removed? The Out Standing Text still shows once the focus is removed

Answer 1

Normally, you should be able to do it by using ng-blur but for some reason there is an issue with that directive in use with md-autocomplete: https://github.com/angular/material/issues/3906

But i tried to solve it differently, not the most correct way, but it works. What you have to do is bind event with blur in input inside md-autocomplete. In this event you have to clear your searchText of md-autocomplete. So just bind that event in your controller somehow like that:

angular.element(document.querySelector('md-autocomplete input')).bind('blur', 
    function(){ 
        setTimeout(function(){
            angular.element(document.querySelector('md-autocomplete')).scope().ctrl.searchText = ''; 
            angular.element(document.querySelector('md-autocomplete')).scope().$apply();
        }, 300);
    }
)

The reason why I used timeout was the fact that chip was not added if searchText variable was cleared too fast. But when I added 300ms delay it worked as I expected. For sure there is better way to do it, but just try to do it this way and maybe it will be enough for you.

Here is working codepen: http://codepen.io/anon/pen/QdNydx