fix(autocomplete): probably clear the autocomplete.

At the moment we calling the `select(-1)` function, but that will cause problems, because it will stuck.
There is no need of calling the `select(-1)` function, we should just clear the loading indicator on an synchronous query.
On an async query, the loading indicator will be set by default to false on completion.

This fixes the issue, which required two clicks on a list item after cleared the autocomplete through the button.

Fixes #7180

Closes #7354

Author: devversion

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];
@@ -750,6 +755,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

@@ -615,17 +615,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 });
@@ -667,9 +666,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();
     }