fix(autocomplete): probably clear the autocomplete.

src/components/autocomplete/autocomplete.spec.js

@@ -16,13 +16,18 @@ describe('<md-autocomplete>', function() {
     items = items || ['foo', 'bar', 'baz'].map(function(item) {
         return {display: item};
       });
-    inject(function($rootScope) {
+    inject(function($rootScope, $timeout) {
       scope = $rootScope.$new();
       scope.match = function(term) {
         return items.filter(function(item) {
           return item.display.indexOf(matchLowercase ? term.toLowerCase() : term) === 0;
         });
       };
+      scope.asyncMatch = function(term) {
+        return $timeout(function() {
+          return scope.match(term)
+        }, 1000);
+      };
       scope.searchText = '';
       scope.selectedItem = null;
       for (var key in obj) scope[key] = obj[key];
@@ -723,6 +728,37 @@ describe('<md-autocomplete>', function() {
     }));
   });
 
+  describe('Async matching', function() {
+
+    it('should probably stop the loading indicator when clearing', inject(function($timeout, $material) {
+      var scope = createScope();
+      var template =
+        '<md-autocomplete ' +
+        '    md-search-text="searchText"' +
+        '    md-items="item in asyncMatch(searchText)" ' +
+        '    md-item-text="item.display" ' +
+        '    placeholder="placeholder">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var element = compile(template, scope);
+      var input = element.find('input');
+      var ctrl = element.controller('mdAutocomplete');
+
+      $material.flushInterimElement();
+
+      scope.$apply('searchText = "test"');
+
+      ctrl.clear();
+
+      expect(ctrl.loading).toBe(true);
+
+      $timeout.flush();
+
+      expect(ctrl.loading).toBe(false);
+    }));
+
+  });
+
   describe('API access', function() {
     it('should clear the selected item', inject(function($timeout) {
       var scope = createScope();

src/components/autocomplete/js/autocompleteController.js

@@ -613,17 +613,16 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
    * Clears the searchText value and selected item.
    */
   function clearValue () {
-    // Set the loading to true so we don't see flashes of content
+    // Set the loading to true so we don't see flashes of content.
+    // The flashing will only occour when an async request is running.
+    // So the loading process will stop when the results had been retrieved.
     setLoading(true);
 
     // Reset our variables
     ctrl.index = 0;
     ctrl.matches = [];
     $scope.searchText = '';
 
-    // Tell the select to fire and select nothing
-    select(-1);
-
     // Per http://www.w3schools.com/jsref/event_oninput.asp
     var eventObj = document.createEvent('CustomEvent');
     eventObj.initCustomEvent('input', true, true, { value: $scope.searchText });
@@ -664,9 +663,16 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
     function handleResults (matches) {
       cache[ term ] = matches;
       if ((searchText || '') !== ($scope.searchText || '')) return; //-- just cache the results if old request
+
       ctrl.matches = matches;
       ctrl.hidden  = shouldHide();
+
+      // If loading is in progress, then we'll end the progress. This is needed for example,
+      // when the `clear` button was clicked, because there we always show the loading process, to prevent flashing.
+      if (ctrl.loading) setLoading(false);
+
       if ($scope.selectOnMatch) selectItemOnMatch();
+
       updateMessages();
       positionDropdown();
     }