Password input with reactive form, eyeball icon initially outside box until clicked

[Thorski]

[x ] bug report => Search github for a similar issue or PR before submitting

Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/edit/angular-bdvuuo-ypaemo?file=src/app/app.component.html

Current behavior
Use p-password with a reactive form control
<p-password [formControl]="pwFormControl" [toggleMask]="true" [feedback]="false"></p-password>

The eyeball will be positioned outside the input box. Clicking inside the input box resizes it and applies classes and makes it look correct.

Expected behavior
Eyeball should be positioned correctly

Minimal reproduction of the problem with instructions
See stackblitz
https://stackblitz.com/edit/angular-bdvuuo-ypaemo?file=src/app/app.component.html

• Angular version: 12.2.7

• PrimeNG version: 12.2.1
  This does NOT happen in 12.2.0, only in 12.2.1

[kwolfy]

I confirm, have this bug too

[pedroBento1993]

I confirm, same problem

[Thorski]

Here is a workaround that appears to work, but it is not very nice... as it accesses the private 'cd' member in the password component.

` @ViewChild(Password) passwordComponent: Password;

ngAfterViewInit() {
this.passwordComponent['cd'].detectChanges();
}
`

[omaihuru]

as a workaround, you can use styleClass

<p-password [feedback]="false" [toggleMask]="true" formControlName="password" id="password" styleClass="p-password p-component p-inputwrapper p-input-icon-right"></p-password>

[martinovicdev]

I have the same problem, happening in 13.0.2 too.

[majkers]

Seems like [ngCLass] is not working with reactive form. Another UGLY workaround is:
<p-password id="password" #pass [ngClass]="pass.containerClass()" name="password" [formControl]="password" [toggleMask]="true" [feedback]="false" ></p-password>

[rahul54784]

 Try once and see magic 

.p-inputtext,.p-password {
    width: 100% !important;
  }
.pi-eye {
    position: absolute;
    margin-left: -32px;
    margin-top: 17px;
}

[rahul54784]

<p-password formControlName="password" [toggleMask]="true" styleClass="p-password p-component p-inputwrapper p-input-icon-right">

Worked for me

[Jafried15]

Issue still exists on version 13.1.0

[AlbaSS18]

I have the same issue on version 12.2.0

[zakharenkov]

I confirm.
I have the same problem on version 13.0.4.
Here is a fork of their example

[edraft]

any official fixes?

[th1210]

Issue still exists on version 13.2.0.

Found something interesting I guess.
Thorski mentioned, that this has not been a problem on 12.2.0, but since 12.2.1.

So i went to their changelog, and found following addition in 12.2.1:

p-password | onFocus and onBlur Event #10736

Maybe this one will help to figure out the problem.

[GianLucaFinelli]

I have the same problem but in the version "primeng": "^13.0.4"

as a workaround, you can use styleClass

<p-password [feedback]="false" [toggleMask]="true" formControlName="password" id="password" styleClass="p-password p-component p-inputwrapper p-input-icon-right"></p-password>

Workaround => styleClass="p-password p-component p-inputwrapper p-input-icon-right" works

[zedbay]

I confirm the issue still exist in the version "13.3.2" :(

[GreedLine]

I confirm the issue still exist in the version "13.1.0".

And this workaround is usefull, but i'm added to this styles "w-full", it's work.

as a workaround, you can use styleClass

<p-password [feedback]="false" [toggleMask]="true" formControlName="password" id="password" styleClass="p-password p-component p-inputwrapper p-input-icon-right"></p-password>

[Anon31]

On version 13.3.3 I had the same problem. Solved using styleClass with only "p-input-icon-right"

<span class="p-float-label"> <p-password id="float-label" [toggleMask]="true" [formControl]="control" styleClass="p-input-icon-right"></p-password> <label for="float-label">{{label}}</label> </span>

Thanks for raising the issue.

[jonnysamps]

Can confirm still exists in 13.4.1

[Kuncha98]

I have the same problem but in the version "primeng": "^13.0.4"

@omaihuru
as a workaround, you can use styleClass

<p-password [feedback]="false" [toggleMask]="true" formControlName="password" id="password" styleClass="p-password p-component p-inputwrapper p-input-icon-right">

Workaround => styleClass="p-password p-component p-inputwrapper p-input-icon-right" works for me

Thanks for raising the issue.

[Thorski]

Still an issue. Would be nice to not have to use one of these workarounds.

[JuanSeBestia]

Maybe it https://github.com/primefaces/primeng/pull/11416/files fix them also

[murgaratone]

I have the same problem but in the version "primeng": "^13.0.4"

@omaihuru as a workaround, you can use styleClass

<p-password [feedback]="false" [toggleMask]="true" formControlName="password" id="password" styleClass="p-password p-component p-inputwrapper p-input-icon-right">

Workaround => styleClass="p-password p-component p-inputwrapper p-input-icon-right" works for me

Thanks for raising the issue.

How did you discover that it was solved like this, it worked perfectly for me, thanks.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[zakharenkov]

Tested on version 14.2.1.
Everything is great.

[ansyg]

as a workaround, you can use styleClass

<p-password [feedback]="false" [toggleMask]="true" formControlName="password" id="password" styleClass="p-password p-component p-inputwrapper p-input-icon-right"></p-password>

Thanks, this worked for me

[tuyen-cpu]

as a workaround, you can use styleClass

<p-password [feedback]="false" [toggleMask]="true" formControlName="password" id="password" styleClass="p-password p-component p-inputwrapper p-input-icon-right"></p-password>

Thank you, it worked for me

[Ban117]

My situation was that I started with an old project that used PrimeNG 11.4.0 and created a new project with the same business logic but with the latest PrimeNG 16.0.2 but carried over an outdated theme.css. Since it seems like we had generated a theme.css from the visual editor a couple of years back, the selector for the icon was wrong:

.p-input-icon-right > i:last-of-type {
	right: 0.5rem;
	color: #6c757d;
}

I generated a random theme and saw that the selector was different:

.p-input-icon-right>.p-icon-wrapper,
.p-input-icon-right>i:last-of-type {

So I added the new selector to the old theme.css file and now icons in the p-password are as they should be.
I didn't have to add styleClass="p-password p-component p-inputwrapper p-input-icon-right"

[sergiohcis]

Hi @Ban117, In my case was exactly the same thing. With a little difference, I completely replaced all files from "asstes/styles/theme" with their, so that css was/is like that on on their own css files. I downloaded version 16.0.0.