Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Thorski opened this issue Oct 28, 2021 · 28 comments
Assignees
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team

Comments

@Thorski
Copy link

Thorski commented Oct 28, 2021

[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
Copy link

kwolfy commented Oct 31, 2021

I confirm, have this bug too

@pedroBento1993
Copy link

I confirm, same problem

@Thorski
Copy link
Author

Thorski commented Nov 5, 2021

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();
}
`

@yigitfindikli yigitfindikli added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Nov 8, 2021
@yigitfindikli yigitfindikli self-assigned this Nov 8, 2021
@yigitfindikli yigitfindikli added this to the 13.Future milestone Nov 8, 2021
@omaihuru
Copy link

omaihuru commented Nov 12, 2021

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
Copy link

I have the same problem, happening in 13.0.2 too.

@majkers
Copy link

majkers commented Dec 13, 2021

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
Copy link

rahul54784 commented Jan 4, 2022

 Try once and see magic 

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

@rahul54784
Copy link

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

Worked for me

@Jafried15
Copy link

Issue still exists on version 13.1.0

@AlbaSS18
Copy link

I have the same issue on version 12.2.0

@zakharenkov
Copy link

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

@edraft
Copy link

edraft commented Feb 20, 2022

any official fixes?

@th1210
Copy link

th1210 commented Mar 3, 2022

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
Copy link

GianLucaFinelli commented Mar 22, 2022

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
Copy link

zedbay commented Mar 30, 2022

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

@GreedLine
Copy link

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
Copy link

Anon31 commented May 29, 2022

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
Copy link

Can confirm still exists in 13.4.1

@Kuncha98
Copy link

Kuncha98 commented Aug 5, 2022

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
Copy link
Author

Thorski commented Aug 29, 2022

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

@JuanSeBestia
Copy link

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

@murgaratone
Copy link

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
Copy link
Member

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,

@mertsincan mertsincan removed this from the 14.Future milestone Nov 9, 2022
@zakharenkov
Copy link

Tested on version 14.2.1.
Everything is great.

@ansyg
Copy link

ansyg commented Dec 6, 2022

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
Copy link

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
Copy link

Ban117 commented Jul 18, 2023

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
None yet
Development

No branches or pull requests