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

[didibanane]

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..).

[cmacdonnacha]

Any chance this will be implemented soon? Or is there any workaround? I have a use case where the user clicks "X" but I don't want the chip to be removed from the UI until I get a confirmation event back from the server side.

[jratiwanich]

event.stopPropagation() or event.preventDefault() do not work for me.

So you can do something like this when you click X with ng-click="deleteChip($event)"

$scope.deleteChip = function(event) {
  if (confirm('Are you sure you want to delete?')) {
    // do something....
    console.debug("Do the delete ");
  } else {
    //event.stopPropagation();
    //event.preventDefault();
    event.stopImmediatePropagation();
    console.debug("Cancel delete ");
  }
}

[Splaktar]

I've rebased the prior PR and improved the docs slightly. This is now part of the new PR https://github.com/angular/material/pull/11192 which I've submitted for presubmit testing.

I looked at including the $event in md-on-add but things got too complicated to make it part of the same PR (and risk delaying this PR further). If you would like the $event to be available in md-on-add, please create a new issue, reference this PR for md-on-remove, and then create a new PR that handles passing through the event from the various different sources of a chip being added.

[Splaktar]

Closed in https://github.com/angular/material/commit/bd3aa1d3dd1ec398f96253c2fad6a05b9d1b4562.