form input freezes on focus - Safari ONLY

Bug, feature request, or proposal:

[x] Possible Bug

What is the expected behavior?

Form inputs should accept characters

What is the current behavior?

When clicking on any form input in Safari, the focus changes, however, it freezes so it won’t take any input from the keyboard.

Works in: Chrome Version 66.0.3359.181 (Official Build) (64-bit) an Firefox 60.0.1 (64-bit)

Doesn’t work in: Version 11.1 (13605.1.33.1.4)

Identical code - works in Chrome and Firefox, but not Safari.

What are the steps to reproduce?

Try a form in Safari with the following version of material 2.

<!-- login.component.html -->
<form [formGroup]="form">
  <mat-form-field>
    <input matInput formControlName="email" placeholder="Email">
  </mat-form-field>
</form>

// login.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  form: FormGroup;
  constructor(public formBuilder: FormBuilder) {}

  ngOnInit() {
    this.buildForm();
  }

  private buildForm() {
    this.form = this.formBuilder.group({
      email: ['', [Validators.required]]
    });
  }
}

// ....
  {
    path: 'auth/login',
    component: LoginComponent,
  },
//...

Note: The above form is a simplified version for brevity. However, this bare-minimum form is not working in Safari.

Note: Was unable to recreate on stackblitz: https://stackblitz.com/edit/angular-material2-issue-tir445

Also: Was unable to recreated with ngCLI bare-bone created module.

Thoughts: What else could this be that only affects Safari and not the other two browser?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 6.0.5
Node: 9.6.1
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.5
@angular-devkit/build-angular      0.6.5
@angular-devkit/build-ng-packagr   0.6.5
@angular-devkit/build-optimizer    0.6.5
@angular-devkit/core               0.6.5
@angular-devkit/schematics         0.6.5
@angular/cdk                       6.2.1
@angular/cli                       6.0.5
@angular/compiler-cli              6.0.4
@angular/flex-layout               6.0.0-beta.16
@angular/material                  6.2.1
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.5
@schematics/angular                0.6.5
@schematics/update                 0.6.5
ng-packagr                         2.4.2
rxjs                               6.1.0
typescript                         2.7.2
webpack                            4.8.3

Is there anything else we should know?

Clicking on email changes the focus, but keyboard inputs are ignored. if I go really fast, I am able to enter one single char in the field, but that’s about it. Placeholder works, it moves away on focus. Validators work Safari at this point runs at 1.1 % CPU. So no tight loop. No exception errors No other errors on the console.

Form in Chrome: (works as expacted)

Form in Safari: (unable to enter value)

[josephperrott]

Unfortunately there not a quality, efficient way for us to detect if there is a global rule like this applied.

Since this amounts to application specific CSS causing an issue and not something done by the Angular Material library, I am going to go ahead and close this issue out.

[un33k]

After a lot of combinations and permutations, the culprit was the following.

* {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

Safari was disabling the input field.