chips: md-chip-remove and $event.stopPropagation() not working

[HascourAdrien]

Hello, actually working a lot with md-chip which i like pretty much. I encounter several problems. Most of time because the doc is not complete. This time I couldn't find a working solutions in any other place.

my code :

<button class="md-chip-remove"
    md-chip-remove
    ng-click="$event.stopPropagation(); ctrl.function($chip);">
    // ng-click="ctrl.function($chip, $event);">
    <md-icon md-svg-icon="md-close"></md-icon>
 </button>

I use sweetAlert when the user click on the close 'x' of a chip when he wants to remove it. He can click on cancel or confirm the suppression.
the problem is, $event.stopPropagation(); doesn't stop the propagation of the event and remove the md-chip in every cases. Even before the user can click on cancel or confirm.

The only thing I could do is to add again the removed chip to my list of chips if the user clicked on cancel. But that not something i ll be satisfied with.

we got :
md-on-add expression
An expression which will be called when a chip has been added.

md-on-remove expression
An expression which will be called when a chip has been removed.

But we got nothing that is called so we could stop the add or remove action.
something like : md-on-click boolean
which will do the action only when the boolean is true and will wait if it's false.
it's a kind of delay.

But all this wouldn't be necessary if we could stop the propagation on the remove :)

[devversion]

This seems to be a reasonable enhancement request.

• https://github.com/angular/material/blob/master/src/components/chips/js/chipRemoveDirective.js#L39-L42

[gseabrook]

This came up in the project I am working on and came across this issue so I've created a pull request to add the $event as a parameter on the md-chip-remove function

[devversion]

@gseabrook Thanks for the Pull Request.

---

Does your PR allow developers to cancel / interrupt the remove action?

I actually thought it would make more sense to register this event after the element was transcluded correctly.

This would allow developers to just stop propagation of the event the followed

<button class="md-chip-remove" 
    md-chip-remove
    ng-click="$event.stopPropagation();">
  <md-icon md-svg-icon="md-close"></md-icon>
</button>

[gseabrook]

I see, my use case is a little different, I have a div underneath the chips with a click event bound which I don't want to trigger, but removing the chip is fine. My PR solves that problem but doesn't address this.

To solve both, I think you need to be able to override the remove behaviour, what about allowing a method as a parameter of the md-chip-remove that will be called instead of the default removeChip method?

<button class="md-chip-remove" 
    md-chip-remove="ctrl.performSomeAction(chip, chips, event)>
</button>

function postLink(scope, element, attr, ctrl) {
    element.on('click', function(event) {
        scope.$apply(function() {
        if remove method exists
            this.chipRemove({chip: scope.$chip, chips: ctrl.items, event: event})
        else
           ctrl.removeChip(scope.$$replacedScope.$index);
        });
    });
}

Something like that?

[michahell]

This is as much true for deletion as it is for adding. +1

Not having full control over addition / removal makes it hard to have one place for business logic regarding valid and invalid chips, since the events for pressing 'tab' and 'enter' can neither be intercepted (we can not intercept the addition nor removal of chips in general) nor removed (no action on enter / tab at all - you would want to do this because it is not interceptible..).