fix(autocomplete): support ng-click on md-autocomplete (#11758)

Relates to #11625. Relates to #11757.

Author: Splaktar

src/components/autocomplete/autocomplete.spec.js

@@ -536,6 +536,32 @@ describe('<md-autocomplete>', function() {
       element.remove();
     }));
 
+    it('should support ng-click on the md-autocomplete', inject(function() {
+      var scope = createScope(null, {inputId: 'custom-input-id'});
+      scope.test = false;
+      var template =
+        '<md-autocomplete ' +
+        'md-selected-item="selectedItem" ' +
+        'md-search-text="searchText" ' +
+        'md-items="item in match(searchText)" ' +
+        'md-item-text="item.display" ' +
+        'ng-click="test = true" ' +
+        'placeholder="placeholder">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+
+      var element = compile(template, scope);
+      var input = element.find('input');
+
+      expect(scope.test).toBe(false);
+
+      input[0].click();
+
+      expect(scope.test).toBe(true);
+
+      element.remove();
+    }));
+
     it('should support ng-trim for the search input', inject(function() {
       var scope = createScope(null, {inputId: 'custom-input-id'});
       var template =
@@ -615,7 +641,7 @@ describe('<md-autocomplete>', function() {
       element.remove();
     }));
 
-    it('always sets the tabindex of the autcomplete to `-1`', inject(function() {
+    it('always sets the tabindex of the autocomplete to `-1`', inject(function() {
       var scope = createScope(null, {inputId: 'custom-input-id'});
       var template =
         '<md-autocomplete ' +

src/components/autocomplete/js/autocompleteDirective.js

@@ -362,9 +362,15 @@ function MdAutocomplete ($$mdSvgRegistry) {
         }
 
         scope.mdMode = getRepeatMode(attrs.mdMode);
+
+        // Stop click events from bubbling up to the document and triggering a flicker of the
+        // options panel while still supporting ng-click to be placed on md-autocomplete.
+        element.on('click', function(event) {
+          event.stopPropagation();
+        });
       };
     },
-    template:     function (element, attr) {
+    template: function (element, attr) {
       var noItemsTemplate = getNoItemsTemplate(),
           itemTemplate    = getItemTemplate(),
           leftover        = element.html(),
@@ -493,7 +499,6 @@ function MdAutocomplete ($$mdSvgRegistry) {
                 ng-keydown="$mdAutocompleteCtrl.keydown($event)"\
                 ng-blur="$mdAutocompleteCtrl.blur($event)"\
                 ng-focus="$mdAutocompleteCtrl.focus($event)"\
-                ng-click="$event.stopPropagation()"\
                 aria-label="{{floatingLabel}}"\
                 aria-autocomplete="list"\
                 role="combobox"\
@@ -521,7 +526,6 @@ function MdAutocomplete ($$mdSvgRegistry) {
               ng-keydown="$mdAutocompleteCtrl.keydown($event)"\
               ng-blur="$mdAutocompleteCtrl.blur($event)"\
               ng-focus="$mdAutocompleteCtrl.focus($event)"\
-              ng-click="$event.stopPropagation()"\
               placeholder="{{placeholder}}"\
               aria-label="{{placeholder}}"\
               aria-autocomplete="list"\