fix(autofocus) properly parse attribute expression (#9636)

The autofocus directive right now works with an empty value because jqLite just toggles the class if the `force` param is `undefined`.

This means if you change it several times to the same undefined value it does incorrectly update the autofocus class (which is required for the focus target)

Also the autofocus directive does now determine the class immediately and does not require a second digest (previously this could cause issues with the $mdCompiler linking).

Author: devversion

src/core/util/autofocus.js

@@ -90,18 +90,40 @@ angular.module('material.core')
  * </div>
  * </hljs>
  **/
-function MdAutofocusDirective() {
+function MdAutofocusDirective($parse) {
   return {
     restrict: 'A',
-    link: postLink
+    link: {
+      pre: preLink
+    }
   };
-}
 
-function postLink(scope, element, attrs) {
-  var attr = attrs.mdAutoFocus || attrs.mdAutofocus || attrs.mdSidenavFocus;
+  function preLink(scope, element, attr) {
+    var attrExp = attr.mdAutoFocus || attr.mdAutofocus || attr.mdSidenavFocus;
+
+    // Initially update the expression by manually parsing the expression as per $watch source.
+    updateExpression($parse(attrExp)(scope));
+
+    // Only watch the expression if it is not empty.
+    if (attrExp) {
+      scope.$watch(attrExp, updateExpression);
+    }
+
+    /**
+     * Updates the autofocus class which is used to determine whether the attribute
+     * expression evaluates to true or false.
+     * @param {string|boolean} value Attribute Value
+     */
+    function updateExpression(value) {
+
+      // Rather than passing undefined to the jqLite toggle class function we explicitly set the
+      // value to true. Otherwise the class will be just toggled instead of being forced.
+      if (angular.isUndefined(value)) {
+        value = true;
+      }
+
+      element.toggleClass('md-autofocus', !!value);
+    }
+  }
 
-  // Setup a watcher on the proper attribute to update a class we can check for in $mdUtil
-  scope.$watch(attr, function(canAutofocus) {
-    element.toggleClass('md-autofocus', canAutofocus);
-  });
 }

src/core/util/autofocus.spec.js

@@ -7,6 +7,7 @@ describe('md-autofocus', function() {
   }));
 
   describe('add/removes the proper classes', function() {
+
     it('supports true', function() {
       build('<input id="test" type="text" md-autofocus="true">');
 
@@ -34,6 +35,31 @@ describe('md-autofocus', function() {
       expect(element).toHaveClass('md-autofocus');
     });
 
+    it('should properly set the class at initialization', inject(function($compile, $rootScope) {
+      pageScope = $rootScope.$new();
+      element = $compile('<input md-autofocus>')(pageScope);
+
+      expect(element).toHaveClass('md-autofocus');
+    }));
+
+    it('does not accidentally toggle the class', function() {
+      build('<input md-autofocus="autofocus">');
+
+      // By default, we assume an empty value for the expression is true
+      expect(element).toHaveClass('md-autofocus');
+
+      // Trigger a second digest, to be able to set the scope binding to undefined later again.
+      pageScope.$apply('autofocus = true');
+
+      expect(element).toHaveClass('md-autofocus');
+
+      // Set the scope binding to undefined again, which can accidentally toggle the class due to
+      // the jqLite toggleClass function, which just toggles the class if the value is undefined.
+      pageScope.$apply('autofocus = undefined');
+
+      expect(element).toHaveClass('md-autofocus');
+    });
+
     it('supports expressions', function() {
       build('<input id="test" type="text" md-autofocus="shouldAutoFocus==1">');