title: Can't type in HTML form text/password/number input field (website with Unity WebGL build)
body: <p>We are developing a site using Angular 9.
  We have also integrated a Unity3D WebGL build in it.
  When I try to type something in a <strong>text/password/number input field</strong> inside one of my forms, it doesn't write anything and <strong>the field doesn't seem to receive the input</strong>; also, the variable I bound the field to is not updated with the new value.
  What makes it weirder is that:</p>
  <ul>
  <li><strong>I can</strong> select the input field (it gets highlighted as if I can start typing)</li>
  <li><strong>I can</strong> do <code>CTRL+C</code> on the field and what I copied somewhere else is pasted, as expected</li>
  <li><strong>I can</strong> use the <code>type=&quot;number&quot;</code> arrow selectors to set the value of the field</li>
  <li><strong>I cannot</strong> type from the keyboard in the fields</li>
  <li><strong>I can</strong> interact as expected with other form tags, such as <code>&lt;select&gt;</code></li>
  <li><strong>If I reload the page</strong>, it usually starts working as expected and I can type into the fields</li>
  </ul>
  <p>Here is the code from my login form (component.ts above, template HTML below)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { AuthService } from '../auth.service'
  import { first } from 'rxjs/operators';
  import { Router, ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.less']
  })
  export class LoginComponent implements OnInit {
  
    email: string = "";
    password: string = "";
  
    returnUrl: string = "home";
  
    constructor(private router: Router, private route: ActivatedRoute, private authService: AuthService) { }
  
    ngOnInit(): void {
      let tmpReturnUrl = this.route.snapshot.queryParams["returnUrl"];
      if (tmpReturnUrl != undefined)
      {
        console.log("true");
        this.returnUrl = tmpReturnUrl;
      }
      else
        console.log("false");
  
      setInterval(() =&gt; {
        console.log("EMAIL: " + this.email);
      }, 1000);
    }
  
    onSubmit(){
      this.authService.login(this.email, this.password)
      .pipe(first())
      .subscribe(
        result =&gt; {
          console.log("CAIOAOAOAOOA");
          this.router.navigate([this.returnUrl]);
        },
        err =&gt; console.log(err)
      );
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card z-depth-5 w-50"&gt;
    &lt;div class="card-body"&gt;
      &lt;div class="card-title"&gt;Log in&lt;/div&gt;
      &lt;div class="card-text"&gt;
        &lt;form #companyLoginForm="ngForm" (ngSubmit)="onSubmit()"&gt;
          &lt;mat-form-field&gt;
            &lt;mat-label&gt;Email: &lt;/mat-label&gt;
            &lt;input matInput required type="text" name="email" id="email" [(ngModel)]="email"&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;mat-label&gt;Password: &lt;/mat-label&gt;
            &lt;input matInput required type="password" name="password" id="password" [(ngModel)]="password"&gt;
          &lt;/mat-form-field&gt;
          &lt;button type="submit" [disabled]="!companyLoginForm.form.valid"&gt;Login&lt;/button&gt;
        &lt;/form&gt;
        &lt;a routerLink="/company-register"&gt;
          &lt;button mdbBtn type="button" color="primary" class="relative waves-light"&gt;Sign Up&lt;/button&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And here, the code from another form where I also use <code>type=&quot;number&quot;</code> and <code>&lt;select&gt;</code> (component.ts above, template HTML below)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, Output } from '@angular/core';
  import { BlockFormService } from '../block-form.service';
  import { BlockData } from '../blockCardData';
  import { BlockUtilsService } from '../block-utils.service';
  import { ApiService } from '../../core/api.service'
  import { NgForm } from '@angular/forms';
  
  @Component({
    selector: 'app-block-form',
    templateUrl: './block-form.component.html',
    styleUrls: ['./block-form.component.less']
  })
  export class BlockFormComponent implements OnInit {
  
    updateComplete : Boolean = false;
    materials : string[];
    products : string[];
    varieties : string[];
    nations : string[];
    // companies : {name: string, id: string}[] = [];
    company : string = "";
    colors : string[] = ["White", "Grey", "Black", "Brown", "Red", "Green", "Yellow", "Blue"];
    blockData : BlockData = {_id : "", blockId: "",  company: "", material: "", product: "",
                  variety: "", color: "", nation: "", modelName : "", imagePreview : "",
                  price: null, blockNumber: "",
                  length: null, height: null, width: null,
                  weight: null
    };
    imagePreview: File = null;
    zipFile: File = null;
  
    invalidUpload: boolean = false;
  
    constructor( private blockFormService: BlockFormService, public blockUtils: BlockUtilsService, private companiesUtils: ApiService )
    { }
  
    ngOnInit(): void {
      this.materials = this.blockUtils.getMaterials();
      this.colors = this.blockUtils.getColors();
      this.companiesUtils.getLoggedCompany().subscribe(companiesResult =&gt; {
        this.blockData.company = companiesResult._id;
        this.company = companiesResult.name;
      });
    }
  
    onImageSelected(event){
      console.log(event.target.files[0]);
      if (event.target.files[0].type === "image/png")
      {
        if (this.invalidUpload)
          this.invalidUpload = false;
        this.imagePreview = event.target.files[0];
      }
      else{
        if (!this.invalidUpload)
          this.invalidUpload = true;
        event.target.value = null;
      }
    }
  
    onMaterialSet(newMaterial): void{
      console.log("Material set");
      this.products = this.blockUtils.getProducts(newMaterial);
      //console.log(this.products);
      // if (this.products.length &gt; 0)
      //   this.blockData.product = this.products[0];
      // else
        this.blockData.product = "";
  
      this.onProductSet(this.blockData.product);
    }
  
    onProductSet(newProduct): void{
      console.log("Product set");
      this.varieties = this.blockUtils.getVarieties(this.blockData.material, newProduct);
      // if (this.varieties.length &gt; 0)
      //   this.blockData.variety = this.varieties[0];
      // else
      this.blockData.variety = "";
  
      this.nations = this.blockUtils.getNations(this.blockData.material, this.blockData.product);
      if (this.nations.length &gt; 0)
        this.blockData.nation = this.nations[0];
      else
        this.blockData.nation = "";
  
      this.onVarietySet(this.blockData.variety);
    }
  
    onVarietySet(newVariety): void{
      console.log("Variety set");
      // this.nations = this.blockUtils.getNations(this.blockData.material, this.blockData.product);
      // if (this.nations.length &gt; 0)
      //   this.blockData.nation = this.nations[0];
      // else
      //   this.blockData.nation = "";
    }
  
    onSubmit(blockForm : NgForm, imageField, zipField): void{
      this.blockFormService.sendBlock(this.blockData, this.imagePreview, this.zipFile)
      .subscribe(res =&gt; {
        console.log("Sent!");
        this.updateComplete = true;
      });
  
      this.blockData = {
        _id: "", blockId: "", company: "", material: "", product: "",
        variety: "", color: "", nation: "", modelName: "", imagePreview: "",
        price: null, blockNumber: "",
        length: null, height: null, width: null,
        weight: null
      };
      blockForm.resetForm();
      imageField.value = null;
      zipField.value = null;
      this.imagePreview = null;
      this.zipFile = null;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
  
  
    &lt;div class="text-center" *ngIf='updateComplete'&gt;
      Block added successfuly
    &lt;/div&gt;
  
    &lt;form #blockForm="ngForm" (ngSubmit)="onSubmit(blockForm, imageField, zipField)"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Company: &lt;/mat-label&gt;
              &lt;!-- &lt;mat-select required [(ngModel)]="blockData.company" name="company-field"
                id="company-field"&gt;
                &lt;mat-option selected [value]="company.id"&gt;{{company.name}}&lt;/mat-option&gt;
              &lt;/mat-select&gt; --&gt;
              &lt;input matInput disabled [value]="company" type="text" name="company-field" id="company-field"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Material: &lt;/mat-label&gt;
              &lt;mat-select #matField required [(ngModel)]="blockData.material" name="kind-field"
                id="kind-field" (selectionChange)="onMaterialSet(blockData.material)"&gt;
                &lt;mat-option *ngFor="let mat of materials" [value]="mat"&gt;{{mat}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Product: &lt;/mat-label&gt;
              &lt;mat-select required [(ngModel)]="blockData.product" name="product-field"
                id="product-field" (selectionChange)="onProductSet(blockData.product)"&gt;
                &lt;mat-option *ngFor="let prod of products" [value]="prod"&gt;{{prod}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Block Number: &lt;/mat-label&gt;
              &lt;input matInput required [(ngModel)]="blockData.blockNumber" type="text" name="blockNumber-field" id="blockNumber-field"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Variety: &lt;/mat-label&gt;
              &lt;mat-select required [(ngModel)]="blockData.variety" name="variety-field" id="variety-field"
                placeholder="Variety" (selectionChange)="onVarietySet(blockData.variety)"&gt;
                &lt;mat-option *ngFor="let variety of varieties" [value]="variety"&gt;{{variety}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;!-- &lt;label for="color-field"&gt;Color: &lt;/label&gt; --&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Color: &lt;/mat-label&gt;
              &lt;mat-select required [(ngModel)]="blockData.color" name="color-field" id="color-field" placeholder="Color"&gt;
                &lt;mat-option *ngFor="let col of colors" [value]="col"&gt;{{col}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
            &lt;!-- &lt;input #colField required [(ngModel)]="blockData.color" type="text" name="color-field" id="color-field" placeholder="Color"&gt; --&gt;
            &lt;!-- &lt;color-circle #colorField [colors]='["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]' name="color-field" id="color-field" (onChange)="blockData.color = $event.color.hex"&gt;&lt;/color-circle&gt; --&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Nation: &lt;/mat-label&gt;
              &lt;!-- &lt;mat-select required [(ngModel)]="blockData.nation" name="nation-field"
                id="nation-field"&gt;
                &lt;mat-option *ngFor="let nat of nations" [value]="nat"&gt;{{nat}}&lt;/mat-option&gt;
              &lt;/mat-select&gt; --&gt;
              &lt;input matInput disabled [(ngModel)]="blockData.nation" type="text" name="nation-field" id="nation-field"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Price: &lt;/mat-label&gt;
              &lt;input matInput required [(ngModel)]="blockData.price" type="number" name="price-field" id="price-field"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Length: &lt;/mat-label&gt;
              &lt;input matInput required [(ngModel)]="blockData.length" type="number" name="length-field" id="length-field"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Width: &lt;/mat-label&gt;
              &lt;input matInput required [(ngModel)]="blockData.width" type="number" name="width-field" id="width-field"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Height: &lt;/mat-label&gt;
              &lt;input matInput required [(ngModel)]="blockData.height" type="number" name="height-field" id="height-field"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Weight: &lt;/mat-label&gt;
              &lt;input matInput required [(ngModel)]="blockData.weight" type="number" name="weight-field" id="weight-field"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-3"&gt;
            &lt;div class="file-field"&gt;
              &lt;div class="btn btn-primary btn-sm float-left"&gt;
                &lt;label for="image-field"&gt;Upload preview image: &lt;/label&gt;
                &lt;input #imageField (change)="onImageSelected($event)" name="image-field" id="image-field" type="file" accept=".png, image/png" placeholder="Upload your file"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-3"&gt;
            &lt;div class="file-field"&gt;
              &lt;div class="btn btn-primary btn-sm float-left"&gt;
                &lt;label for="zip-field"&gt;Upload models' zip: &lt;/label&gt;
                &lt;input #zipField (change)="zipFile = $event.target.files[0];" name="zip-field" id="zip-field" type="file" placeholder="Upload your file"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type="submit" [disabled]="!blockForm.form.valid || imagePreview == null || zipFile == null || blockData.company === ''"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I hope I was clear enough, any help is appreciated :)</p>