fix(autocomplete): clear search text if select item cleared.

* Currently the autocomplete always updates the searchText according the changed selectedItem.
* When the selectedItem was manually cleared, the searchText will be not updated.
* The `searchText` should be cleared, when the `selectedItem` was cleared and the searchText still matches the selectedItem

Fixes #8788.

Closes #9087

Author: devversion

src/components/autocomplete/autocomplete.spec.js

@@ -58,6 +58,7 @@ describe('<md-autocomplete>', function() {
   }
 
   describe('basic functionality', function() {
+
     it('updates selected item and search text', inject(function($timeout, $mdConstant, $material) {
       var scope = createScope();
       var template = '\
@@ -103,6 +104,116 @@ describe('<md-autocomplete>', function() {
       element.remove();
     }));
 
+    it('should clear the searchText when the selectedItem manually got cleared',
+      inject(function($timeout, $material, $mdConstant) {
+        var scope = createScope();
+
+        var template =
+          '<md-autocomplete ' +
+              'md-selected-item="selectedItem" ' +
+              'md-search-text="searchText" ' +
+              'md-items="item in match(searchText)" ' +
+              'md-item-text="item.display" ' +
+              'placeholder="placeholder"> ' +
+            '<span md-highlight-text="searchText">{{item.display}}</span>' +
+          '</md-autocomplete>';
+
+        var element = compile(template, scope);
+        var ctrl = element.controller('mdAutocomplete');
+        var ul = element.find('ul');
+
+        $material.flushInterimElement();
+
+        expect(scope.searchText).toBe('');
+        expect(scope.selectedItem).toBe(null);
+
+        ctrl.focus();
+
+        scope.$apply('searchText = "fo"');
+        waitForVirtualRepeat(element);
+
+        expect(scope.searchText).toBe('fo');
+        expect(scope.match(scope.searchText).length).toBe(1);
+
+        expect(ul.find('li').length).toBe(1);
+
+        // Run our key events to trigger a select action
+        ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
+        ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ENTER));
+        $timeout.flush();
+
+        expect(scope.searchText).toBe('foo');
+        expect(scope.selectedItem).toBe(scope.match(scope.searchText)[0]);
+
+        // Reset / Clear the current selected item.
+        scope.$apply('selectedItem = null');
+        waitForVirtualRepeat(element);
+
+        // Run our key events to trigger a select action
+        ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
+        ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ENTER));
+        $timeout.flush();
+
+        // The autocomplete automatically clears the searchText when the selectedItem was cleared.
+        expect(scope.searchText).toBe('');
+        expect(scope.selectedItem).toBeFalsy();
+
+        element.remove();
+      }));
+
+    it('should should not clear the searchText when clearing the selected item from the input',
+      inject(function($timeout, $material, $mdConstant) {
+        var scope = createScope();
+
+        var template =
+          '<md-autocomplete ' +
+              'md-selected-item="selectedItem" ' +
+              'md-search-text="searchText" ' +
+              'md-items="item in match(searchText)" ' +
+              'md-item-text="item.display" ' +
+              'placeholder="placeholder"> ' +
+            '<span md-highlight-text="searchText">{{item.display}}</span>' +
+          '</md-autocomplete>';
+
+        var element = compile(template, scope);
+        var ctrl = element.controller('mdAutocomplete');
+        var input = element.find('input');
+        var ul = element.find('ul');
+
+        $material.flushInterimElement();
+
+        expect(scope.searchText).toBe('');
+        expect(scope.selectedItem).toBe(null);
+
+        ctrl.focus();
+
+        scope.$apply('searchText = "fo"');
+        waitForVirtualRepeat(element);
+
+        expect(scope.searchText).toBe('fo');
+        expect(scope.match(scope.searchText).length).toBe(1);
+
+        expect(ul.find('li').length).toBe(1);
+
+        // Run our key events to trigger a select action
+        ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
+        ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ENTER));
+        $timeout.flush();
+
+        expect(scope.searchText).toBe('foo');
+        expect(scope.selectedItem).toBe(scope.match(scope.searchText)[0]);
+
+        scope.$apply('searchText = "food"');
+
+        $timeout.flush();
+
+        // The autocomplete automatically clears the searchText when the selectedItem was cleared.
+        expect(scope.searchText).toBe('food');
+        expect(scope.selectedItem).toBeFalsy();
+
+        element.remove();
+      }));
+
     it('allows you to set an input id without floating label', inject(function() {
       var scope = createScope(null, {inputId: 'custom-input-id'});
       var template = '\

src/components/autocomplete/js/autocompleteController.js

@@ -328,6 +328,15 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
         $scope.searchText = val;
         handleSelectedItemChange(selectedItem, previousSelectedItem);
       });
+    } else if (previousSelectedItem) {
+      getDisplayValue(previousSelectedItem).then(function(displayValue) {
+        // Clear the searchText, when the selectedItem is set to null.
+        // Do not clear the searchText, when the searchText isn't matching with the previous
+        // selected item.
+        if (displayValue.toLowerCase() === $scope.searchText.toLowerCase()) {
+          $scope.searchText = '';
+        }
+      });
     }
 
     if (selectedItem !== previousSelectedItem) announceItemChange();