fix(tooltip): text fields not editable if tooltip is applied in safari

* 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. Similarly to the IOS behavior, we just reset the `user-select` in Safari because we want to avoid such issues.

Fixes #12953

Author: devversion

src/lib/tooltip/tooltip.spec.ts

@@ -45,12 +45,12 @@ describe('MatTooltip', () => {
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
   let dir: {value: Direction};
-  let platform: {IOS: boolean, isBrowser: boolean, ANDROID: boolean};
+  let platform: {IOS: boolean, SAFARI: boolean, isBrowser: boolean, ANDROID: boolean};
   let focusMonitor: FocusMonitor;
 
   beforeEach(async(() => {
     // Set the default Platform override that can be updated before component creation.
-    platform = {IOS: false, isBrowser: true, ANDROID: false};
+    platform = {IOS: false, SAFARI: false, isBrowser: true, ANDROID: false};
 
     TestBed.configureTestingModule({
       imports: [MatTooltipModule, OverlayModule, NoopAnimationsModule],
@@ -805,6 +805,21 @@ describe('MatTooltip', () => {
       expect(instance.textarea.nativeElement.style.webkitUserSelect).toBeFalsy();
     });
 
+    it('should clear the `user-select` when a tooltip is set on a text field in Safari', () => {
+      platform.SAFARI = true;
+
+      const fixture = TestBed.createComponent(TooltipOnTextFields);
+      const instance = fixture.componentInstance;
+
+      fixture.detectChanges();
+
+      expect(instance.input.nativeElement.style.userSelect).toBeFalsy();
+      expect(instance.input.nativeElement.style.webkitUserSelect).toBeFalsy();
+
+      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);
 

src/lib/tooltip/tooltip.ts

@@ -217,12 +217,16 @@ 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 ((_platform.IOS || _platform.SAFARI) &&
+        (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.
+      // problematic on iOS and in Safari, because it will prevent users from typing in inputs.
+      // If we're on iOS or inside of Safari and the tooltip is attached on an input or textarea,
+      // we clear the `user-select` inline style to avoid these issues.
       element.style.webkitUserSelect = element.style.userSelect = '';
     }