angular-materialmd-autocompletemd-chip

md-chips and md-autocomplete input field


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


Solution

  • 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