Fix an issue where clicking the dropdown arrow in Chrome saved changes

In Chrome, clicks on elements inside a disabled <button>
will not invoke the <button>'s "click" event listeners
but they will propagate through the button and invoke parent
element's click handlers. In Firefox however, the click
event is not propagated.

The fix here is to install the click handler for the main
part of a dropdown button on the <button> itself, rather than
the container <div> which holds the main button and
the dropdown arrow.

Card 89

h/static/scripts/directive/dropdown-menu-btn.js

@@ -2,6 +2,10 @@
 
 // @ngInject
 function DropdownMenuBtnController($scope, $timeout) {
+  this.onClick = function($event) {
+    $scope.onClick();
+  };
+
   this.toggleDropdown = function($event) {
     $event.stopPropagation();
     $timeout(function () {
@@ -19,6 +23,7 @@ module.exports = function () {
       isDisabled: '=',
       label: '=',
       dropdownMenuLabel: '@',
+      onClick: '&',
       onToggleDropdown: '&',
     },
     templateUrl: 'dropdown_menu_btn.html'

h/templates/client/dropdown_menu_btn.html

 <div class="dropdown-menu-btn">
-  <button class="dropdown-menu-btn__label" ng-bind="label" ng-disabled="isDisabled"></button>
+  <button
+    class="dropdown-menu-btn__label"
+    ng-bind="label"
+    ng-click="vm.onClick($event)"
+    ng-disabled="isDisabled">
+  </button>
   <button
     class="dropdown-menu-btn__dropdown-arrow"
     title="{{dropdownMenuLabel}}"

h/templates/client/publish_annotation_btn.html

 <div dropdown="" class="publish-annotation-btn__btn" is-open="vm.showDropdown" keyboard-nav>
   <dropdown-menu-btn
     label="'Post to ' + vm.publishDestination"
-    ng-click="vm.save()"
+    on-click="vm.save()"
     on-toggle-dropdown="vm.showDropdown = !vm.showDropdown"
     title="Publish this annotation to {{vm.publishDestination}}"
     dropdown-menu-label="Change annotation sharing setting"