feat(autocomplete): forward ngBlur and ngFocus attributes (#9233)

Developers are currently not able to use ngBlur or ngFocus on the autocomplete, since the autocomplete is handling its focus from an underlaying input.

References #4492

Author: devversion

src/components/autocomplete/autocomplete.spec.js

@@ -386,6 +386,66 @@ describe('<md-autocomplete>', function() {
       element.remove();
     }));
 
+    it('should emit the ngBlur event from the input', inject(function() {
+      var scope = createScope(null, {
+        onBlur: jasmine.createSpy('onBlur event')
+      });
+
+      var template =
+        '<md-autocomplete ' +
+            'md-selected-item="selectedItem" ' +
+            'md-search-text="searchText" ' +
+            'md-items="item in match(searchText)" ' +
+            'md-item-text="item.display" ' +
+            'ng-blur="onBlur($event)" ' +
+            'placeholder="placeholder">' +
+          '<span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+
+      var element = compile(template, scope);
+      var input = element.find('input');
+
+      input.triggerHandler('blur');
+
+      expect(scope.onBlur).toHaveBeenCalledTimes(1);
+
+      // Confirm that the ngFocus event was called with the $event local.
+      var focusEvent = scope.onBlur.calls.mostRecent().args[0];
+      expect(focusEvent.target).toBe(input[0]);
+
+      element.remove();
+    }));
+
+    it('should emit the ngFocus event from the input', inject(function() {
+      var scope = createScope(null, {
+        onFocus: jasmine.createSpy('onFocus event')
+      });
+
+      var template =
+        '<md-autocomplete ' +
+            'md-selected-item="selectedItem" ' +
+            'md-search-text="searchText" ' +
+            'md-items="item in match(searchText)" ' +
+            'md-item-text="item.display" ' +
+            'ng-focus="onFocus($event)" ' +
+            'placeholder="placeholder">' +
+          '<span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+
+      var element = compile(template, scope);
+      var input = element.find('input');
+
+      input.triggerHandler('focus');
+
+      expect(scope.onFocus).toHaveBeenCalledTimes(1);
+
+      // Confirm that the ngFocus event was called with the $event object.
+      var focusEvent = scope.onFocus.calls.mostRecent().args[0];
+      expect(focusEvent.target).toBe(input[0]);
+
+      element.remove();
+    }));
+
     it('should not show a loading progress when the items object is invalid', inject(function() {
       var scope = createScope(null, {
         match: function() {

src/components/autocomplete/js/autocompleteController.js

@@ -426,10 +426,12 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
   /**
    * Handles input blur event, determines if the dropdown should hide.
    */
-  function blur () {
+  function blur($event) {
     hasFocus = false;
+
     if (!noBlur) {
       ctrl.hidden = shouldHide();
+      evalAttr('ngBlur', { $event: $event });
     }
   }
 
@@ -450,10 +452,19 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
    */
   function focus($event) {
     hasFocus = true;
-    //-- if searchText is null, let's force it to be a string
-    if (!angular.isString($scope.searchText)) $scope.searchText = '';
+
+    // When the searchText is not a string, force it to be an empty string.
+    if (!angular.isString($scope.searchText)) {
+      $scope.searchText = '';
+    }
+
     ctrl.hidden = shouldHide();
-    if (!ctrl.hidden) handleQuery();
+
+    if (!ctrl.hidden) {
+      handleQuery();
+    }
+
+    evalAttr('ngFocus', { $event: $event });
   }
 
   /**
@@ -897,4 +908,15 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
     });
   }
 
+  /**
+   * Evaluates an attribute expression against the parent scope.
+   * @param {String} attr Name of the attribute to be evaluated.
+   * @param {Object?} locals Properties to be injected into the evaluation context.
+   */
+ function evalAttr(attr, locals) {
+    if ($attrs[attr]) {
+      $scope.$parent.$eval($attrs[attr], locals || {});
+    }
+  }
+
 }

src/components/autocomplete/js/autocompleteDirective.js

@@ -259,10 +259,10 @@ function MdAutocomplete ($$mdSvgRegistry) {
                   ng-model="$mdAutocompleteCtrl.scope.searchText"\
                   ng-model-options="{ allowInvalid: true }"\
                   ng-keydown="$mdAutocompleteCtrl.keydown($event)"\
-                  ng-blur="$mdAutocompleteCtrl.blur()"\
-                  ' + (attr.mdNoAsterisk != null ? 'md-no-asterisk="' + attr.mdNoAsterisk + '"' : '') + '\
+                  ng-blur="$mdAutocompleteCtrl.blur($event)"\
                   ng-focus="$mdAutocompleteCtrl.focus($event)"\
                   aria-owns="ul-{{$mdAutocompleteCtrl.id}}"\
+                  ' + (attr.mdNoAsterisk != null ? 'md-no-asterisk="' + attr.mdNoAsterisk + '"' : '') + '\
                   ' + (attr.mdSelectOnFocus != null ? 'md-select-on-focus=""' : '') + '\
                   aria-label="{{floatingLabel}}"\
                   aria-autocomplete="list"\
@@ -285,7 +285,7 @@ function MdAutocomplete ($$mdSvgRegistry) {
                 ng-readonly="$mdAutocompleteCtrl.isReadonly"\
                 ng-model="$mdAutocompleteCtrl.scope.searchText"\
                 ng-keydown="$mdAutocompleteCtrl.keydown($event)"\
-                ng-blur="$mdAutocompleteCtrl.blur()"\
+                ng-blur="$mdAutocompleteCtrl.blur($event)"\
                 ng-focus="$mdAutocompleteCtrl.focus($event)"\
                 placeholder="{{placeholder}}"\
                 aria-owns="ul-{{$mdAutocompleteCtrl.id}}"\