update(autocomplete, bottomsheet, dialog, sidenav): revert autocomplete md-auto-focus changes

Autocomplete should not use $mdUtils.findFocusTarget(); since it may be used as a child component within InterimElements.

*  Change tag usage from `md-auto-focus` to `md-autofocus`.
*  AutoComplete calls `focusElement()` when the component recieves focus.

Author: ThomasBurleson

src/components/autocomplete/demoBasicUsage/index.html

@@ -4,7 +4,6 @@
       <p>Use  <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
       <md-autocomplete
           ng-disabled="ctrl.isDisabled"
-          md-enable-autofocus="true"
           md-no-cache="ctrl.noCache"
           md-selected-item="ctrl.selectedItem"
           md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"

src/components/autocomplete/js/autocompleteController.js

@@ -63,6 +63,7 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
       gatherElements();
       moveDropdown();
       focusElement();
+      $element.on('focus', focusElement);
     });
   }
 
@@ -124,10 +125,7 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
    * Sends focus to the input element.
    */
   function focusElement () {
-    if ($scope.enableAutofocus) {
-      $mdUtil.findFocusTarget($element);
-    }
-    //elements.input.focus();
+    if ($scope.autofocus) elements.input.focus();
   }
 
   /**

src/components/autocomplete/js/autocompleteDirective.js

@@ -49,7 +49,7 @@ angular
  *     make suggestions
  * @param {number=} md-delay Specifies the amount of time (in milliseconds) to wait before looking
  *     for results
- * @param {boolean=} md-enable-autofocus If true, will immediately focus the input element
+ * @param {boolean=} md-autofocus If true, will immediately focus the input element
  * @param {boolean=} md-autoselect If true, the first item will be selected by default
  * @param {string=} md-menu-class This will be applied to the dropdown menu for styling
  * @param {string=} md-floating-label This will add a floating label to autocomplete and wrap it in
@@ -136,7 +136,7 @@ function MdAutocomplete () {
       textChange:     '&?mdSearchTextChange',
       minLength:      '=?mdMinLength',
       delay:          '=?mdDelay',
-      enableAutofocus:'=?mdEnableAutofocus',
+      autofocus:      '=?mdAutofocus',
       floatingLabel:  '@?mdFloatingLabel',
       autoselect:     '=?mdAutoselect',
       menuClass:      '@?mdMenuClass',
@@ -219,8 +219,7 @@ function MdAutocomplete () {
                   aria-autocomplete="list"\
                   aria-haspopup="true"\
                   aria-activedescendant=""\
-                  aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"\
-                  md-auto-focus/>\
+                  aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
               <div md-autocomplete-parent-scope md-autocomplete-replace>' + leftover + '</div>\
             </md-input-container>';
         } else {
@@ -242,8 +241,7 @@ function MdAutocomplete () {
                 aria-autocomplete="list"\
                 aria-haspopup="true"\
                 aria-activedescendant=""\
-                aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"\
-                md-auto-focus/>\
+                aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
             <button\
                 type="button"\
                 tabindex="-1"\

src/components/bottomSheet/bottomSheet.spec.js

@@ -42,16 +42,16 @@ describe('$mdBottomSheet service', function() {
       expect(parent.find('md-bottom-sheet').length).toBe(1);
     }));
 
-    it('should focus child with md-auto-focus', inject(function($rootScope, $animate, $document, $mdBottomSheet) {
+    it('should focus child with md-autofocus', inject(function($rootScope, $animate, $document, $mdBottomSheet) {
       jasmine.mockElementFocus(this);
       var parent = angular.element('<div>');
       var markup = '' +
         '<md-bottom-sheet>' +
         '  <md-input-container><label>Label</label>' +
-        '    <input type="text" md-auto-focus>' +
+        '    <input type="text" md-autofocus>' +
         '  </md-input-container>' +
         '  <md-input-container><label>Label</label>' +
-        '    <input type="text" md-auto-focus>' +
+        '    <input type="text" md-autofocus>' +
         '  </md-input-container>' +
         '<md-bottom-sheet>';
 
@@ -67,7 +67,7 @@ describe('$mdBottomSheet service', function() {
       expect(sheet.length).toBe(1);
       var focusEl = sheet.find('input');
 
-      // Focus should be on the last md-auto-focus element
+      // Focus should be on the last md-autofocus element
       expect($document.activeElement).toBe(focusEl[1]);
     }));
   });

src/components/bottomSheet/demoBasicUsage/bottom-sheet-list-template.html

@@ -5,7 +5,7 @@
 
       <md-button
           ng-click="listItemClick($index)"
-          md-auto-focus="$index == 2"
+          md-autofocus="$index == 2"
           class="md-list-item-content" >
         <md-icon md-svg-src="{{item.icon}}"></md-icon>
         <span class="md-inline-list-icon-label">{{ item.name }}</span>

src/components/dialog/demoBasicUsage/dialog1.tmpl.html

@@ -27,7 +27,7 @@ <h2>Mango (Fruit)</h2>
   </md-dialog-content>
 
   <div class="md-actions" layout="row">
-    <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-auto-focus>
+    <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
       More on Wikipedia
     </md-button>
     <span flex></span>

src/components/dialog/dialog.js

@@ -415,7 +415,7 @@ function MdDialogProvider($$interimElementProvider) {
         '     ng-click="dialog.abort()" class="md-primary">',
         '     {{ dialog.cancel }}',
         '   </md-button>',
-        '   <md-button ng-click="dialog.hide()" class="md-primary" md-auto-focus="dialog.$type!=\'confirm\'">',
+        '   <md-button ng-click="dialog.hide()" class="md-primary" md-autofocus="dialog.$type!=\'confirm\'">',
         '     {{ dialog.ok }}',
         '   </md-button>',
         ' </div>',

src/components/dialog/dialog.spec.js

@@ -79,7 +79,7 @@ describe('$mdDialog', function() {
       $mdDialog.show(
         $mdDialog.alert({
           template: '<md-dialog>' +
-          '<md-dialog-content tabIndex="0" md-auto-focus>' +
+          '<md-dialog-content tabIndex="0" md-autofocus>' +
           '<p>Muppets are the best</p>' +
           '</md-dialog-content>' +
           '</md-dialog>',

src/components/sidenav/demoBasicUsage/index.html

@@ -59,7 +59,7 @@ <h1 class="md-toolbar-tools">Sidenav Right</h1>
           <md-input-container>
             <label for="testInput">Test input</label>
             <input type="text" id="testInput"
-                   ng-model="data" md-auto-focus>
+                   ng-model="data" md-autofocus>
           </md-input-container>
         </form>
         <md-button ng-click="close()" class="md-primary">

src/components/sidenav/sidenav.spec.js

@@ -79,12 +79,12 @@ describe('mdSidenav', function() {
       expect($document.activeElement).toBe(focusEl[0]);
     }));
 
-    it('should focus child with md-auto-focus', inject(function($rootScope, $animate, $document, $compile) {
+    it('should focus child with md-autofocus', inject(function($rootScope, $animate, $document, $compile) {
       jasmine.mockElementFocus(this);
       var parent = angular.element('<div>');
       var markup = '<md-sidenav md-is-open="show">'+
                       '<md-input-container><label>Label</label>' +
-                        '<input type="text" md-auto-focus>' +
+                        '<input type="text" md-autofocus>' +
                       '</md-input-container>' +
                     '<md-sidenav>';
       var sidenavEl = angular.element(markup);

src/core/util/util.js

@@ -78,7 +78,7 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate) {
      *   <form>
      *     <md-input-container>
      *       <label for="testInput">Label</label>
-     *       <input id="testInput" type="text" md-auto-focus>
+     *       <input id="testInput" type="text" md-autofocus>
      *     </md-input-container>
      *   </form>
      * </md-dialog>
@@ -90,7 +90,7 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate) {
      *  <md-list>
      *    <md-list-item ng-repeat="item in items">
      *
-     *      <md-button md-auto-focus="$index == 2">
+     *      <md-button md-autofocus="$index == 2">
      *        <md-icon md-svg-src="{{item.icon}}"></md-icon>
      *        <span class="md-inline-list-icon-label">{{ item.name }}</span>
      *      </md-button>
@@ -102,14 +102,14 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate) {
      *
      **/
     findFocusTarget: function(containerEl, attributeVal) {
-      var elToFocus, items = containerEl[0].querySelectorAll(attributeVal || '[md-auto-focus]');
+      var elToFocus, items = containerEl[0].querySelectorAll(attributeVal || '[md-autofocus]');
 
       // Find the last child element with the focus attribute
       items.length && angular.forEach(items, function(it) {
         it = angular.element(it);
 
         // If the expression evaluates to FALSE, then it is not focusable target
-        var focusExpression = it[0].getAttribute('md-auto-focus');
+        var focusExpression = it[0].getAttribute('md-autofocus');
         var isFocusable = focusExpression ? (it.scope().$eval(focusExpression) !== false ) : true;
 
         if (isFocusable) elToFocus = it;