enhance(autocomplete): prevents dropdown from showing briefly after some

key presses

enhance(autocomplete): replaces 'x' button with md-icon

Related to #1484.

src/components/autocomplete/autocomplete-theme.scss

@@ -2,6 +2,11 @@ md-autocomplete {
   background: '{{background-50}}';
   button {
     background: '{{background-200}}';
+    md-icon {
+      path {
+        fill: '{{foreground-2}}';
+      }
+    }
   }
   ul {
     background: '{{background-50}}';

src/components/autocomplete/autocomplete.scss

@@ -99,6 +99,15 @@ md-autocomplete {
     border-radius: 50%;
     padding: 0;
     font-size: 12px;
+    md-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0) scale(0.6);
+      path {
+        stroke-width: 0;
+      }
+    }
     &.ng-enter {
       transform: scale(0);
       transition: transform 0.15s ease-out;

src/components/autocomplete/js/autocompleteController.js

@@ -106,7 +106,7 @@
           break;
         default:
           self.index = -1;
-          self.hidden = false;
+          self.hidden = isHidden();
           //-- after value updates, check if list should be hidden
           $timeout(function () { self.hidden = isHidden(); });
       }

src/components/autocomplete/js/autocompleteDirective.js

@@ -48,7 +48,7 @@
               type="button"\
               ng-if="searchText"\
               ng-click="$mdAutocompleteCtrl.clear()">\
-              <span aria-hidden="true">X</span>\
+              <md-icon md-svg-icon="close"></md-icon>\
               <span class="visually-hidden">Clear</span>\
               </button>\
           <md-progress-linear ng-if="$mdAutocompleteCtrl.loading" md-mode="indeterminate"></md-progress-linear>\

src/core/core.js

@@ -19,11 +19,17 @@ angular
     // be removed from this startup process.
 
 
-    var svgRegistry = [{
-                    id : "tabs-arrow",
-                    url: "tabs-arrow.svg",
-                    svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g id="tabs-arrow"><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>'
-                  }];
+    var svgRegistry = [
+      {
+        id : "tabs-arrow",
+        url: "tabs-arrow.svg",
+        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g id="tabs-arrow"><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "/></g></svg>'
+      },
+      {
+        id : "close",
+        url: "close.svg",
+        svg: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24"><g id="close"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/></g></svg>'
+      }];
 
     svgRegistry.forEach(function(asset){
       iconProvider.icon(asset.id,  asset.url);