diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index f1369966ff8..e3aabe5d0d7 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -790,9 +790,8 @@ describe('MatTooltip', () => { }); describe('special cases', () => { - it('should clear the `user-select` when a tooltip is set on a text field in iOS', () => { - platform.IOS = true; + it('should clear the `user-select` when a tooltip is set on a text field', () => { const fixture = TestBed.createComponent(TooltipOnTextFields); const instance = fixture.componentInstance; @@ -800,9 +799,11 @@ describe('MatTooltip', () => { expect(instance.input.nativeElement.style.userSelect).toBeFalsy(); expect(instance.input.nativeElement.style.webkitUserSelect).toBeFalsy(); + expect(instance.input.nativeElement.style.msUserSelect).toBeFalsy(); expect(instance.textarea.nativeElement.style.userSelect).toBeFalsy(); expect(instance.textarea.nativeElement.style.webkitUserSelect).toBeFalsy(); + expect(instance.textarea.nativeElement.style.msUserSelect).toBeFalsy(); }); it('should clear the `-webkit-user-drag` on draggable elements', () => { diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 01d73ee11c0..5c12163211d 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -217,13 +217,15 @@ export class MatTooltip implements OnDestroy { .set('mouseenter', () => this.show()) .set('mouseleave', () => this.hide()) .forEach((listener, event) => element.addEventListener(event, listener)); - } else if (_platform.IOS && (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA')) { + } + + if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') { // When we bind a gesture event on an element (in this case `longpress`), HammerJS // will add some inline styles by default, including `user-select: none`. This is - // problematic on iOS, because it will prevent users from typing in inputs. If - // we're on iOS and the tooltip is attached on an input or textarea, we clear - // the `user-select` to avoid these issues. - element.style.webkitUserSelect = element.style.userSelect = ''; + // problematic on iOS and in Safari, because it will prevent users from typing in inputs. + // Since `user-select: none` is not needed for the `longpress` event and can cause unexpected + // behavior for text fields, we always clear the `user-select` to avoid such issues. + element.style.webkitUserSelect = element.style.userSelect = element.style.msUserSelect = ''; } // Hammer applies `-webkit-user-drag: none` on all elements by default,