Expected behavior

Click handlers for buttons or anchors should work when they are in an element with mdbSortable applied to it.

Actual behavior

Clicking a button or anchor tag causes the parent component to be picked up (to be moved) and the click handler associated with the button or anchor tag is never called.

If the anchor tag has an href="" attribute, the page will be navigated (which is not good for an Angular application). However, if the anchor tag or button has a (click) handler, the handler will not be called.

The code example from "Sortable deck of cards" was used as a test, since it contains a button inside of a movable card. The button animation occurs when clicked, and the button does not initiate a drag, but the event associated with the button's (click) handler is still not called.

Resources (screenshots, code snippets etc.)

The following click handler is called when it is not in an element that is not sortable. When in a sortable element, the click handler will not be called:

<a mdbBtn (click)="detailToggle();" size="sm" color="info" rounded="true">{{ buttonText }}</a>

In my particular application, the parent element is a <li> with class "list-group-item". The anchor tag appears in its body.