DnD broken when matTooltip applied

[chriswhite199]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

matTooltip shouldn't break DnD behavior

What is the current behavior?

Application of matTooltip breaks native DnD behavior

What are the steps to reproduce?

Add matTooltip directive to an element that is also draggable

StackBlitz example: https://stackblitz.com/edit/angular-material2-issue-xsqsew

<button mat-raised-button draggable="true" matTooltip="Tooltip breaks dnd">DnD broken</button>
<button mat-raised-button draggable="true">DnD works</button>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: v6.3.0

[jelbourn]

@chriswhite199 can you elaborate on what "broken" means?

[chriswhite199]

DnD no longer functions - the stackblitz has instructions and fully demonstrates the issue

[chriswhite199]

To elaborate: When you apply matTooltip directive to an element, draggable behavior for that element no longer seems to work - the overlay / ghost for the element isn't shown when you attempt to drag it, nor does any target see the event for when the element is dragged over it, or dropped on it.

[jelbourn]

I suspect it has to do with the longpress gesture handler that the tooltip adds for mobile. A short-term workaround would likely be making a parent element of the tooltiped element draggable.

[chriswhite199]

@jelbourn - Wrapping the button in a div works as you suggested - thanks!