diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 4206fa1eeb19..64f7cb3c6dd1 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/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: ` + + `, +}) +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 diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 8e25695e3865..c059be30d6f0 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/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) {