Input Password PrimeNG only works after clicking on the input

Question

I have the following problem when using ngprime, when the page loads the input is buggy. If I click on the input it is correct, according to the second photo. Can you help me with this? I installed prime flex, prime ng. I imported the styles in angular.json

  formulario: FormGroup = this.fb.group({
    email: [null, [Validators.email, Validators.required]],
    password: [null, Validators.required]
  });

    <form [formGroup]="formulario" class="p-fluid mt-5">

      <fieldset class="field">
        <label for="password" class="block">Email</label>
        <span class="p-input-icon-left my-2">
          <i class="pi pi-user"></i>
          <input id="email" formControlName="email" type="email" pInputText placeholder="Email">
        </span>
      </fieldset>

      <fieldset class="field mt-2">
        <label for="password" class="block">Password</label>

        <p-password id="password" formControlName="password" [toggleMask]="true" promptLabel="Ingresa tu contraseña"
          weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte">
        </p-password>
      </fieldset>

    </form>

Answer 1

It appears to be a known bug in the component. You can see the thread on GitHub here.

There's a workaround until they fix it. Add the following attribute to the p-password element:

styleClass="p-password p-component p-inputwrapper p-input-icon-right"

Like this:

<p-password id="password" 
            [toggleMask]="true"
            promptLabel="Ingresa tu contraseña"
            weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte"
            styleClass="p-password p-component p-inputwrapper p-input-icon-right">
</p-password>