fix(autocomplete): remove autofocus ambiguity. (#9438)

* The autocomplete opens the dropdown when the `md-autofocus` attribute is specified.
* This wasn't docmented for a long time, since the global `md-autofocus`
  is a key attribute, to mark an element to be focused upon opening. (e.g
  `md-sidenav`, `md-bottom-sheet`, `md-dialog`.

* This also fixes an issue where the autocomplete dropdown shows up twice, when having the autocomplete inside of a dialog.

Author: devversion

src/components/autocomplete/autocomplete.spec.js

@@ -278,6 +278,36 @@ describe('<md-autocomplete>', function() {
       element.remove();
     }));
 
+    it('should forward focus to the input element with md-autofocus', inject(function($timeout) {
+
+      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"' +
+        '    md-autofocus>' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+
+      var element = compile(template, scope);
+      var input = element.find('input');
+
+      document.body.appendChild(element[0]);
+
+      // Initial timeout for gathering elements
+      $timeout.flush();
+
+      element.triggerHandler('focus');
+
+      expect(document.activeElement).toBe(input[0]);
+
+      element.remove();
+    }));
+
     it('allows using an empty readonly attribute', inject(function() {
       var scope = createScope(null, {inputId: 'custom-input-id'});
       var template = '\

src/components/autocomplete/demoInsideDialog/dialog.tmpl.html

@@ -20,7 +20,8 @@ <h2>Autocomplete Dialog Example</h2>
             md-items="item in ctrl.querySearch(ctrl.searchText)"
             md-item-text="item.display"
             md-min-length="0"
-            placeholder="What is your favorite US state?">
+            placeholder="What is your favorite US state?"
+            md-autofocus="">
           <md-item-template>
             <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
           </md-item-template>

src/components/autocomplete/js/autocompleteController.js

@@ -70,10 +70,14 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
     $mdTheming($element);
     configureWatchers();
     $mdUtil.nextTick(function () {
+
       gatherElements();
       moveDropdown();
-      focusElement();
-      $element.on('focus', focusElement);
+
+      // Forward all focus events to the input element when autofocus is enabled
+      if ($scope.autofocus) {
+        $element.on('focus', focusInputElement);
+      }
     });
   }
 
@@ -166,8 +170,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
   /**
    * Sends focus to the input element.
    */
-  function focusElement () {
-    if ($scope.autofocus) elements.input.focus();
+  function focusInputElement () {
+    elements.input.focus();
   }
 
   /**