PrimeNG "p-password" size not working inside a "p-inputgroup"

Question

Im trying to create a Signing Up page using Angular and the PrimeNG modules, and I am using the "p-inputgroup" class to include icons next to the input fields, and it works for the text inputs but the "p-password" fields don't fit the container correctly:

this is my code:

<div class="flex justify-content-center">
  <form [formGroup]="registerForm" class=" m-2">
    <div class=" p-inputgroup mb-2 mt-2">
      <span class="p-inputgroup-addon">
          <i class="pi pi-user"></i>
      </span>
      <input pInputText formControlName="name" placeholder="Nombre" />

    </div>
    <div class="p-inputgroup mb-2 mt-2">
        <span class="p-inputgroup-addon">
          <i class="pi pi-envelope"></i>
        </span>
        <input type="text" pInputText formControlName="email" placeholder="Correo" />
        
    </div>
    <div class="p-inputgroup mb-2 mt-2">
        <span class="p-inputgroup-addon">
          <i class="pi pi-lock"></i>
        </span>
        <p-password  [toggleMask]="true" formControlName="password" ></p-password>
      </div>
    <div class=" p-inputgroup mb-2 mt-2">
      <span class="p-inputgroup-addon">
        <i class="pi pi-check"></i>
      </span>
      <p-password  [toggleMask]="true" formControlName="passwordConfirm" ></p-password>
    </div>
    <div class="flex justify-content-center">
      <p-button label="Submit" (onClick)="onSubmit()"></p-button>
  </div>
  </form>
  
</div>

And that looks like this:

Image of the form rendered

I would appreciate any insights or guidance on how to correctly style the 'p-password' field within the 'p-inputgroup' to achieve a consistent look with the other input fields. Thank you.

Answer 1

Suspect this is a bug when using <p-password> with p-inputgroup.

However, you can overwrite the PrimeNG CSS behavior via

.p-inputgroup > p-password > .p-password.p-inputwrapper {
  width: 100%;
}

You can add this to the global stylesheet of your application.

Demo @ StackBlitz