fix(autocomplete): improve clear and blur behavior on escape

* Prevent browser from using default ESCAPE key interaction for escape.
* Set ctrl.hidden variable on escape

Some browsers clear any input with type search on ESCAPE keypress.
ctrl.hidden variable was not correctly reflecting dropdown hidden state

Fixes #8917

Closes #8920

Author: clshortfuse

src/components/autocomplete/autocomplete.spec.js

@@ -400,48 +400,67 @@ describe('<md-autocomplete>', function() {
                   placeholder="placeholder">\
                 <span md-highlight-text="searchText">{{item.display}}</span>\
               </md-autocomplete>';
-      beforeEach( inject(function($timeout) {
+      beforeEach( inject(function($timeout, $material) {
         scope = createScope();
         element = compile(template, scope);
         ctrl = element.controller('mdAutocomplete');
 
+        $material.flushInterimElement();
+
+        // Update the scope
+        element.scope().searchText = 'fo';
+        waitForVirtualRepeat(element);
+
         // Focus the input
         ctrl.focus();
         $timeout.flush();
-        expect(scope.searchText).toBe('');
 
-        scope.$apply('searchText = "test"');
+        expect(ctrl.hidden).toBe(false);
 
-        expect(scope.searchText).toBe('test');
+        expect(scope.searchText).toBe('fo');
 
+        waitForVirtualRepeat(element);
         $timeout.flush();
+        expect(ctrl.hidden).toBe(false);
       }));
 
       afterEach(function() { element.remove() });
-      it('does not clear the value nor blur when hitting escape', inject(function($mdConstant, $document) {
+      it('does not clear the value nor blur when hitting escape', inject(function($mdConstant, $document, $timeout) {
         scope.$apply('escapeOptions = "none"');
         scope.$apply(function() {
           ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ESCAPE));
+          $timeout.flush();
+          expect(ctrl.hidden).toBe(true);
+          ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ESCAPE));
+          $timeout.flush();
         });
 
-        expect(scope.searchText).toBe('test');
+        expect(scope.searchText).toBe('fo');
         expect($document.activeElement).toBe(ctrl[0]);
       }));
 
-      it('does not clear the value but does blur when hitting escape', inject(function($mdConstant, $document) {
+      it('does not clear the value but does blur when hitting escape', inject(function($mdConstant, $document, $timeout) {
         scope.$apply('escapeOptions = "blur"');
         scope.$apply(function() {
           ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ESCAPE));
+          $timeout.flush();
+          expect(ctrl.hidden).toBe(true);
+          ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ESCAPE));
+          $timeout.flush();
         });
 
-        expect(scope.searchText).toBe('test');
+        expect(scope.searchText).toBe('fo');
         expect($document.activeElement).toBe(undefined);
       }));
 
-      it('clear the value but does not blur when hitting escape', inject(function($mdConstant, $document) {
+      it('clear the value but does not blur when hitting escape', inject(function($mdConstant, $document, $timeout) {
         scope.$apply('escapeOptions = "clear"');
         scope.$apply(function() {
           ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ESCAPE));
+          $timeout.flush();
+          expect(ctrl.hidden).toBe(true);
+          ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ESCAPE));
+          $timeout.flush();
         });
 
         expect(scope.searchText).toBe('');

src/components/autocomplete/js/autocompleteController.js

@@ -482,21 +482,21 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
         select(ctrl.index);
         break;
       case $mdConstant.KEY_CODE.ESCAPE:
+        event.preventDefault(); // Prevent browser from always clearing input
         if (!shouldProcessEscape()) return;
         event.stopPropagation();
-        event.preventDefault();
 
         clearSelectedItem();
         if ($scope.searchText && hasEscapeOption('clear')) {
           clearSearchText();
         }
 
+        // Manually hide (needed for mdNotFound support)
+        ctrl.hidden = true;
+
         if (hasEscapeOption('blur')) {
           // Force the component to blur if they hit escape
           doBlur(true);
-        } else {
-          // Manually hide (needed for mdNotFound support)
-          ctrl.hidden = true;
         }
 
         break;