Google Chrome assigns a text field as a password field

Question

I have a basic text field but Google Chrome assigns it as a password field.

<form [formGroup]="formBuilder">

  <p>
    <mat-form-field appearance="fill">
      <mat-label>Title</mat-label>
      <input matInput placeholder="Type a title" formControlName="title">
    </mat-form-field>
  </p>

  <p>
    <mat-form-field appearance="fill">
      <mat-label>Description</mat-label>
      <textarea matInput></textarea>
    </mat-form-field>
  </p>

  <p>
    <mat-form-field appearance="fill">
      <mat-label>Label of a detail</mat-label>
      <input matInput type="text"> <!-- THE PROBLEM -->
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Description of a detail</mat-label>
      <input matInput type="text">
    </mat-form-field>
  </p>

</form>

This is what it looks like if I click on that input field:

I have tried the same code on StackBlitz but there it looks good and I don't see the problem there.

I am running that page on localhost:4200. How comes this field is a password field??

Answer 1

My problem was solved when I added IDs to the input fields.

<mat-form-field appearance="fill">
  <mat-label>Label of a detail</mat-label>
  <input id="detail-label" matInput type="text">
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>Description of a detail</mat-label>
  <input id="detail-description" matInput type="text">
</mat-form-field>