Input of type password is blocking backspace key only on Safari

Viewed 411

I am having problems with input of type password which is blocking user's to press the backspace key and so he can't erase caracters. Strange thing, it is also blocking the email input above. However, when I change the type of the password input to text, everything is working fine.

I am using :

  • Angular 8.2.14
  • Angular Material 8.2.3
  • Safari 13.1

The npx browserslist command output safari 13,safari 12.1 for the projet.

Here's what the code is looking like :

<mat-card *ngIf="!loading">
  <mat-card-title>
    {{"LOGIN" | translate}}
  </mat-card-title>
  <mat-card-content>
    <form (ngSubmit)="valid()">
      <mat-form-field>
        <input matInput [placeholder]="'EMAIL_ADDRESS' | translate" [(ngModel)]="email" name="email"/>
      </mat-form-field>
      <mat-form-field>
        <input type="text" matInput [placeholder]="'PASSWORD' | translate" [(ngModel)]="password" name="password"/>
      </mat-form-field>
      <div>
        <mat-checkbox [(ngModel)]="rememberMe" name="rememberMe">{{'REMEMBER_ME' | translate}}</mat-checkbox>
      </div>
      <div>
        <a [routerLink]="'/forget'">{{ 'PASSWORD_FORGET' | translate }}</a>
      </div>
      <button class="margined" mat-raised-button color="primary"> {{"SUBMIT" | translate}}</button>
    </form>
  </mat-card-content>
</mat-card>

I've tried to remove all the content related to the Angular Material library, it doesn't seem to solve the problem.

1 Answers

The answer was to delete this tiny line of css

input { -webkit-user-select: all!important; }

Everything is working fine now. Sorry for the inconvenience, it was my fault.

Related