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

Author: devversion

src/lib/tooltip/tooltip.spec.ts

@@ -790,19 +790,20 @@ 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;
 
       fixture.detectChanges();
 
       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', () => {

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,