feat(chips): expose $event in md-on-remove (#11192)

Author: Splaktar

src/components/chips/chips.spec.js

@@ -9,7 +9,7 @@ describe('<md-chips>', function() {
   var CHIP_ADD_TEMPLATE =
     '<md-chips ng-model="items" md-on-add="addChip($chip, $index)"></md-chips>';
   var CHIP_REMOVE_TEMPLATE =
-    '<md-chips ng-model="items" md-on-remove="removeChip($chip, $index)"></md-chips>';
+    '<md-chips ng-model="items" md-on-remove="removeChip($chip, $index, $event)"></md-chips>';
   var CHIP_SELECT_TEMPLATE =
     '<md-chips ng-model="items" md-on-select="selectChip($chip)"></md-chips>';
   var CHIP_NG_CHANGE_TEMPLATE =
@@ -194,6 +194,17 @@ describe('<md-chips>', function() {
         expect(scope.removeChip.calls.mostRecent().args[1]).toBe(0);       // Index
       });
 
+      it('should make the event available when removing a chip', function() {
+        var element = buildChips(CHIP_REMOVE_TEMPLATE);
+        var chips = getChipElements(element);
+ 
+        scope.removeChip = jasmine.createSpy('removeChip');
+        var chipButton = angular.element(chips[1]).find('button');
+        chipButton[0].click();
+ 
+        expect(scope.removeChip).toHaveBeenCalled();
+        expect(scope.removeChip.calls.mostRecent().args[2].type).toBe('click');
+      });
 
       it('should trigger ng-change on chip addition/removal', function() {
         var element = buildChips(CHIP_NG_CHANGE_TEMPLATE);
@@ -1521,16 +1532,16 @@ describe('<md-chips>', function() {
         expect(chips.length).toBe(3);
 
         // Remove 'Banana'
-        var db = angular.element(chips[1]).find('button');
-        db[0].click();
+        var chipButton = angular.element(chips[1]).find('button');
+        chipButton[0].click();
 
         scope.$digest();
         chips = getChipElements(element);
         expect(chips.length).toBe(2);
 
         // Remove 'Orange'
-        db = angular.element(chips[1]).find('button');
-        db[0].click();
+        chipButton = angular.element(chips[1]).find('button');
+        chipButton[0].click();
 
         scope.$digest();
         chips = getChipElements(element);

src/components/chips/js/chipsController.js

@@ -369,7 +369,7 @@ MdChipsCtrl.prototype.chipKeydown = function (event) {
       event.preventDefault();
       // Cancel the delete action only after the event cancel. Otherwise the page will go back.
       if (!this.isRemovable()) return;
-      this.removeAndSelectAdjacentChip(this.selectedChip);
+      this.removeAndSelectAdjacentChip(this.selectedChip, event);
       break;
     case this.$mdConstant.KEY_CODE.LEFT_ARROW:
       event.preventDefault();
@@ -407,17 +407,18 @@ MdChipsCtrl.prototype.getPlaceholder = function() {
 
 /**
  * Removes chip at {@code index} and selects the adjacent chip.
- * @param index
+ * @param {number} index
+ * @param {Event=} event
  */
-MdChipsCtrl.prototype.removeAndSelectAdjacentChip = function(index) {
+MdChipsCtrl.prototype.removeAndSelectAdjacentChip = function(index, event) {
   var self = this;
   var selIndex = self.getAdjacentChipIndex(index);
   var wrap = this.$element[0].querySelector('md-chips-wrap');
   var chip = this.$element[0].querySelector('md-chip[index="' + index + '"]');
 
-  self.removeChip(index);
+  self.removeChip(index, event);
 
-  // The dobule-timeout is currently necessary to ensure that the DOM has finalized and the select()
+  // The double-timeout is currently necessary to ensure that the DOM has finalized and the select()
   // will find the proper chip since the selection is index-based.
   //
   // TODO: Investigate calling from within chip $scope.$on('$destroy') to reduce/remove timeouts
@@ -592,20 +593,21 @@ MdChipsCtrl.prototype.updateNgModel = function() {
 
 /**
  * Removes the chip at the given index.
- * @param index
+ * @param {number} index
+ * @param {Event=} event
  */
-MdChipsCtrl.prototype.removeChip = function(index) {
+MdChipsCtrl.prototype.removeChip = function(index, event) {
   var removed = this.items.splice(index, 1);
 
   this.updateNgModel();
 
   if (removed && removed.length && this.useOnRemove && this.onRemove) {
-    this.onRemove({ '$chip': removed[0], '$index': index });
+    this.onRemove({ '$chip': removed[0], '$index': index, '$event': event });
   }
 };
 
-MdChipsCtrl.prototype.removeChipAndFocusInput = function (index) {
-  this.removeChip(index);
+MdChipsCtrl.prototype.removeChipAndFocusInput = function (index, $event) {
+  this.removeChip(index, $event);
 
   if (this.autocompleteCtrl) {
     // Always hide the autocomplete dropdown before focusing the autocomplete input.

src/components/chips/js/chipsDirective.js

@@ -96,7 +96,7 @@
    *
    * Please refer to the documentation of this option (below) for more information.
    *
-   * @param {string=|object=} ng-model A model to which the list of items will be bound.
+   * @param {string|object=} ng-model A model to which the list of items will be bound.
    * @param {expression=} ng-change AngularJS expression to be executed on chip addition/removal
    * @param {string=} placeholder Placeholder text that will be forwarded to the input.
    * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,
@@ -122,9 +122,9 @@
    *    - `undefined` to simply add the `$chip` input string, or
    *    - `null` to prevent the chip from being appended
    * @param {expression=} md-on-add An expression which will be called when a chip has been
-   *    added.
+   *    added with `$chip` and `$index` available as parameters.
    * @param {expression=} md-on-remove An expression which will be called when a chip has been
-   *    removed.
+   *    removed with `$chip`, `$index`, and `$event` available as parameters.
    * @param {expression=} md-on-select An expression which will be called when a chip is selected.
    * @param {boolean} md-require-match If true, and the chips template contains an autocomplete,
    *    only allow selection of pre-defined chips (i.e. you cannot add new ones).
@@ -232,7 +232,7 @@
       <button\
           class="md-chip-remove"\
           ng-if="$mdChipsCtrl.isRemovable()"\
-          ng-click="$mdChipsCtrl.removeChipAndFocusInput($$replacedScope.$index)"\
+          ng-click="$mdChipsCtrl.removeChipAndFocusInput($$replacedScope.$index, $event)"\
           type="button"\
           tabindex="-1">\
         <md-icon md-svg-src="{{ $mdChipsCtrl.mdCloseIcon }}"></md-icon>\