Currently immersed in the Angular 15 migration process...
Today, I encountered an issue with a password input that displays two eyes the first time something is entered in the field.
The HTML code for this is as follows:
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input matInput [type]="showPassword ? 'text' : 'password'" name="password">
<mat-icon matSuffix (click)="togglePasswordVisibility()">
{{showPassword?'visibility_off':'visibility'}}
</mat-icon>
</mat-form-field>
In the corresponding Typescript component, you will find something like this:
...
public showPassword: boolean = false;
public togglePasswordVisibility(): void {
this.showPassword = !this.showPassword;
}
...
And here is the current outcome:
Any suggestions on how to tackle this issue?
UPDATE
I managed to solve the problem by eliminating the toggle feature of the input password using the following CSS:
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear
{
display: none;
}