Autocomplete suggestions not shown after all chips removed (md-chips + md-autocomplete)

Question

In my example (https://jsfiddle.net/vv18yjzo/7/) the autocomplete suggestions should be shown, as long as the md-chips input is focused. This works well when I enter a few items. However, when all available items are added and then removed, the autocomplete suggestions are empty / hidden. I have to enter a new search text to see the autocomplete suggestions again.

HTML:

<md-input-container class="md-block">

    <label>Categories</label>

    <md-chips ng-model="vm.selectedCategories" 
        md-autocomplete-snap
        md-require-match="true"
        md-on-add="vm.onCategoryAdded($chip, $index)"
        md-on-remove="vm.onCategoryRemoved($chip, $index)">

        <md-autocomplete
            md-selected-item="vm.autocomplete.selectedItem"
            md-search-text="vm.autocomplete.searchText"
            md-selected-item-change="vm.onSelectedItemChanged()"
            md-search-text-change="vm.onSearchTextChanged()"
            md-items="item in vm.searchCategories()"
            md-item-text="item.name"
            md-min-length="0"
            md-select-on-match="true"
            md-match-case-insensitive="true"
            md-no-cache="true"
            placeholder="Choose categories">

            <span md-highlight-text="vm.autocomplete.searchText" 
                md-highlight-flags="i">{{item.name}}</span>

        </md-autocomplete>

        <md-chip-template>
            <span>
                <strong>{{$chip.name}}</strong>
            </span>
        </md-chip-template>

    </md-chips>

</md-input-container>

JS:

(function () {
    'use strict';

    angular
        .module('app', [
            'ngMaterial', 
            'ngMessages'
        ])
        .factory('CategoriesService', CategoriesService)
        .controller('CategoriesCtrl', CategoriesCtrl);

    function CategoriesService($q, $timeout) {

        var that = {
                find: find
            },
            categories = [
                { name: 'a' },
                { name: 'ab' },
                { name: 'abc' },
                { name: 'abcd' },
                { name: 'abcde' },
                { name: 'abcdef' }
            ];

        function find(search, selectedCategories) {
            var deferred = $q.defer(),
                result = categories.filter(function(category) {
                    return (-1 === selectedCategories.indexOf(category) && -1 !== category.name.indexOf(search));
                });

            $timeout(function() {
                deferred.resolve(result);
            }, 100);

            return deferred.promise;
        }

        return that;
    }

    function CategoriesCtrl($scope, CategoriesService) {
        var vm = this;

        vm.selectedCategories = [];
        vm.autocomplete = {
            selectedItem: null,
            searchText: null
        };

        /* ... */

        vm.searchCategories = function() {
            return CategoriesService.find(vm.autocomplete.searchText.toLowerCase(), vm.selectedCategories);
        };

    }

})();

Example: https://jsfiddle.net/vv18yjzo/7/

Answer 1

There seems to be a weird bug with the autocomplete searchtext, if you remove an item it just unsets the searchtext variable, which then breaks the autocomplete events.

Check this working fiddle https://jsfiddle.net/mgsLkf89/3/

vm.onCategoryRemoved = function($chip, $index) {
  if (!vm.autocomplete.searchText) 
    vm.autocomplete.searchText=null;
};