From 0389d12309b6abf33ae6a30a24c520b33e5ef7c5 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Tue, 11 Sep 2018 19:43:40 +0200
Subject: [PATCH] fix(tooltip): text fields not editable if tooltip is applied
 in safari (#12959)

Applying `matTooltip` directly on a `<input>` or `<textarea>` element causes HammerJS to add a `user-select: none` inline style. This prevents users from typing into the text fields in Safari.

Since the `user-select: none` is not needed for the `longpress` event, we can just **always reset** the `user-select` if a tooltip is applied on a text-field because we want to avoid such issues.

Fixes #12953
---
 src/lib/tooltip/tooltip.spec.ts |  5 +++--
 src/lib/tooltip/tooltip.ts      | 12 +++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

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,