fix(tooltip): interfering with native drag&drop (#12200)

Author: crisbeto

src/lib/tooltip/tooltip.spec.ts

@@ -54,7 +54,8 @@ describe('MatTooltip', () => {
         ScrollableTooltipDemo,
         OnPushTooltipDemo,
         DynamicTooltipsDemo,
-        TooltipOnTextFields
+        TooltipOnTextFields,
+        TooltipOnDraggableElement,
       ],
       providers: [
         {provide: Platform, useFactory: () => platform},
@@ -795,6 +796,15 @@ describe('MatTooltip', () => {
       expect(instance.textarea.nativeElement.style.userSelect).toBeFalsy();
       expect(instance.textarea.nativeElement.style.webkitUserSelect).toBeFalsy();
     });
+
+    it('should clear the `-webkit-user-drag` on draggable elements', () => {
+      const fixture = TestBed.createComponent(TooltipOnDraggableElement);
+
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.button.nativeElement.style.webkitUserDrag).toBeFalsy();
+    });
+
   });
 
 });
@@ -900,6 +910,20 @@ class TooltipOnTextFields {
   @ViewChild('textarea') textarea: ElementRef;
 }
 
+@Component({
+  template: `
+    <button
+      #button
+      style="-webkit-user-drag: none;"
+      draggable="true"
+      matTooltip="Drag me"></button>
+  `,
+})
+class TooltipOnDraggableElement {
+  @ViewChild('button') button: ElementRef;
+}
+
+
 /** Asserts whether a tooltip directive has a tooltip instance. */
 function assertTooltipInstance(tooltip: MatTooltip, shouldExist: boolean): void {
   // Note that we have to cast this to a boolean, because Jasmine will go into an infinite loop

src/lib/tooltip/tooltip.ts

@@ -223,6 +223,13 @@ export class MatTooltip implements OnDestroy {
       element.style.webkitUserSelect = element.style.userSelect = '';
     }
 
+    // Hammer applies `-webkit-user-drag: none` on all elements by default,
+    // which breaks the native drag&drop. If the consumer explicitly made
+    // the element draggable, clear the `-webkit-user-drag`.
+    if (element.draggable && element.style['webkitUserDrag'] === 'none') {
+      element.style['webkitUserDrag'] = '';
+    }
+
     _focusMonitor.monitor(element).pipe(takeUntil(this._destroyed)).subscribe(origin => {
       // Note that the focus monitor runs outside the Angular zone.
       if (!origin) {