update(autocomplete, bottomsheet, dialog, sidenav): add support for md-auto-focus

Provide a consistent approach to optionally specify child element that should be focused for any component. When the owning component is ready, use `$mdUtil.findFocusTarget()`

* Bottomsheet and sideNav allows any child element to be the auto-focus target; using `md-auto-focus`
  * Sidenav Basic Usage demo specifies `md-auto-focus` on the input form element.
  * Bottomsheet Basic Usage demo shows expression use with `md-auto-focus` to conditional
focus an element within ng-repeat.
* Dialog allows custom dialog content to specify an `md-auto-focus` target for any content element.
  *  Basic Demo uses `md-auto-focus` on first action button

BREAKING CHANGE: md-autocomplete's `md-autofocus` has changed to `md-enable-autofocus`; to differentiate use with the new `md-auto-focus` indicator.

Change your code from this:

    ```html
    <md-autocomplete md-autofocus>
    ```

    To this:

    ```html
        <md-autocomplete md-enable-autofocus>
    ```

Fixes #1190.

Author: ThomasBurleson

src/components/autocomplete/demoBasicUsage/index.html

@@ -4,6 +4,7 @@
       <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

@@ -61,8 +61,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
     configureWatchers();
     $mdUtil.nextTick(function () {
       gatherElements();
-      focusElement();
       moveDropdown();
+      focusElement();
     });
   }
 
@@ -124,7 +124,10 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
    * Sends focus to the input element.
    */
   function focusElement () {
-    if ($scope.autofocus) elements.input.focus();
+    if ($scope.enableAutofocus) {
+      $mdUtil.findFocusTarget($element);
+    }
+    //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-autofocus If true, will immediately focus the input element
+ * @param {boolean=} md-enable-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',
-      autofocus:      '=?mdAutofocus',
+      enableAutofocus:'=?mdEnableAutofocus',
       floatingLabel:  '@?mdFloatingLabel',
       autoselect:     '=?mdAutoselect',
       menuClass:      '@?mdMenuClass',
@@ -219,7 +219,8 @@ function MdAutocomplete () {
                   aria-autocomplete="list"\
                   aria-haspopup="true"\
                   aria-activedescendant=""\
-                  aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
+                  aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"\
+                  md-auto-focus/>\
               <div md-autocomplete-parent-scope md-autocomplete-replace>' + leftover + '</div>\
             </md-input-container>';
         } else {
@@ -241,7 +242,8 @@ function MdAutocomplete () {
                 aria-autocomplete="list"\
                 aria-haspopup="true"\
                 aria-activedescendant=""\
-                aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"/>\
+                aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"\
+                md-auto-focus/>\
             <button\
                 type="button"\
                 tabindex="-1"\

src/components/bottomSheet/bottomSheet.js

@@ -17,6 +17,7 @@ function MdBottomSheetDirective() {
   };
 }
 
+
 /**
  * @ngdoc service
  * @name $mdBottomSheet
@@ -138,7 +139,7 @@ function MdBottomSheetProvider($$interimElementProvider) {
     };
 
 
-    function onShow(scope, element, options) {
+    function onShow(scope, element, options, controller) {
 
       element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
 
@@ -165,7 +166,7 @@ function MdBottomSheetProvider($$interimElementProvider) {
 
       return $animate.enter(bottomSheet.element, options.parent)
         .then(function() {
-          var focusable = angular.element(
+          var focusable = $mdUtil.findFocusTarget(element) || angular.element(
             element[0].querySelector('button') ||
             element[0].querySelector('a') ||
             element[0].querySelector('[ng-click]')

src/components/bottomSheet/bottomSheet.spec.js

@@ -15,7 +15,8 @@ describe('$mdBottomSheet service', function() {
 
       expect(parent.find('md-bottom-sheet').length).toBe(1);
 
-      $rootElement.triggerHandler({type: 'keyup',
+      $rootElement.triggerHandler({
+        type: 'keyup',
         keyCode: $mdConstant.KEY_CODE.ESCAPE
       });
 
@@ -36,9 +37,38 @@ describe('$mdBottomSheet service', function() {
 
       expect(parent.find('md-bottom-sheet').length).toBe(1);
 
-      $rootElement.triggerHandler({ type: 'keyup', keyCode: $mdConstant.KEY_CODE.ESCAPE });
+      $rootElement.triggerHandler({type: 'keyup', keyCode: $mdConstant.KEY_CODE.ESCAPE});
 
       expect(parent.find('md-bottom-sheet').length).toBe(1);
     }));
+
+    it('should focus child with md-auto-focus', 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>' +
+        '  </md-input-container>' +
+        '  <md-input-container><label>Label</label>' +
+        '    <input type="text" md-auto-focus>' +
+        '  </md-input-container>' +
+        '<md-bottom-sheet>';
+
+      $mdBottomSheet.show({
+        template: '<md-bottom-sheet>',
+        parent: parent,
+        escapeToClose: false
+      });
+      $rootScope.$apply();
+      $animate.triggerCallbacks();
+
+      var sheet = parent.find('md-bottom-sheet');
+      expect(sheet.length).toBe(1);
+      var focusEl = sheet.find('input');
+
+      // Focus should be on the last md-auto-focus element
+      expect($document.activeElement).toBe(focusEl[1]);
+    }));
   });
 });

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

@@ -3,7 +3,10 @@
   <md-list>
     <md-list-item ng-repeat="item in items">
 
-      <md-button class="md-list-item-content" ng-click="listItemClick($index)">
+      <md-button
+          ng-click="listItemClick($index)"
+          md-auto-focus="$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>
       </md-button>

src/components/bottomSheet/demoBasicUsage/style.css

@@ -19,3 +19,19 @@
 .md-grid-text {
   padding-bottom: 5px;
   }
+
+
+md-list-item, md-list-item .md-list-item-inner {
+  min-height: 48px;
+
+}
+
+h2 {
+  line-height: 36px;
+    padding-top: 10px;
+}
+
+
+.md-subheader .md-subheader-inner {
+  padding: 0px;
+}

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

@@ -4,7 +4,7 @@
     <div class="md-toolbar-tools">
       <h2>Mango (Fruit)</h2>
       <span flex></span>
-      <md-button class="md-icon-button" ng-click="answer('not applicable')">
+      <md-button class="md-icon-button" ng-click="answer('not applicable')" >
         <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
       </md-button>
     </div>
@@ -27,14 +27,14 @@ <h2>Mango (Fruit)</h2>
   </md-dialog-content>
 
   <div class="md-actions" layout="row">
-    <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" hide show-md>
+    <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-auto-focus>
       More on Wikipedia
     </md-button>
     <span flex></span>
-    <md-button ng-click="answer('not useful')">
+    <md-button ng-click="answer('not useful')" >
      Not Useful
     </md-button>
-    <md-button ng-click="answer('useful')" style="margin-right:20px;">
+    <md-button ng-click="answer('useful')" style="margin-right:20px;" >
       Useful
     </md-button>
   </div>

src/components/dialog/demoBasicUsage/script.js

@@ -25,9 +25,9 @@ angular.module('dialogDemo1', ['ngMaterial'])
           .title('Would you like to delete your debt?')
           .content('All of the banks have agreed to forgive you your debts.')
           .ariaLabel('Lucky day')
+          .targetEvent(ev)
           .ok('Please do it!')
-          .cancel('Sounds like a scam')
-          .targetEvent(ev);
+          .cancel('Sounds like a scam');
 
     $mdDialog.show(confirm).then(function() {
       $scope.status = 'You decided to get rid of your debt.';

src/components/dialog/dialog.js

@@ -32,6 +32,8 @@ function MdDialogDirective($$rAF, $mdTheming) {
   };
 }
 
+
+
 /**
  * @ngdoc service
  * @name $mdDialog
@@ -413,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-button ng-click="dialog.hide()" class="md-primary" md-auto-focus="dialog.$type!=\'confirm\'">',
         '     {{ dialog.ok }}',
         '   </md-button>',
         ' </div>',
@@ -453,7 +455,7 @@ function MdDialogProvider($$interimElementProvider) {
     /**
      * Show method for dialogs
      */
-    function onShow(scope, element, options) {
+    function onShow(scope, element, options, controller) {
       element = $mdUtil.extractElementByName(element, 'md-dialog');
       angular.element($document[0].body).addClass('md-dialog-is-showing');
 
@@ -474,13 +476,15 @@ function MdDialogProvider($$interimElementProvider) {
        */
       function focusOnOpen() {
         if (options.focusOnOpen) {
-          var target = (options.$type === 'alert') ? element.find('md-dialog-content') : findCloseButton();
+          var target = $mdUtil.findFocusTarget(element) || findCloseButton();
           target.focus();
         }
 
+        /**
+         *  If no element with class dialog-close, try to find the last
+         *  button child in md-actions and assume it is a close button
+         */
         function findCloseButton() {
-          //If no element with class dialog-close, try to find the last
-          //button child in md-actions and assume it is a close button
           var closeButton = element[0].querySelector('.dialog-close');
           if (!closeButton) {
             var actionButtons = element[0].querySelectorAll('.md-actions button');
@@ -534,6 +538,8 @@ function MdDialogProvider($$interimElementProvider) {
       // In case the user provides a raw dom element, always wrap it in jqLite
       options.parent = angular.element(options.parent || $rootElement);
 
+
+
     }
 
     /**