Floating label issue with eye toggle in Ionic password input

Ionic Framework Ionic Angular
1

Hi, I’m working on a password field with an eye toggle in Ionic. The issue I’m facing is that the floating label automatically moves to the top even when the user hasn’t entered anything, which is messing up the UI. Here’s the code I’m using:

html
Copy code

<ion-input [fill]=“INPUT_FILL_T.OUTLINE” label-placement=“floating” type=“password” [label]=“‘PASSWORD’ | translate” name=“password” [placeholder]=“‘PASSWORD’ | translate” autocomplete=“off” [(ngModel)]=“loginData.password” required>
<ion-input-password-toggle sl

ot=“end”>

Password label should at the placeholder at the start same like username, when user enter in the field it should float to top of the field
password field error

I want the label to float only when the user types in the input. Could someone help me fix this issue?

Thanks!

2

I believe this is a bug in Ionic. See my post over here that links to two open issues - Ion-input-password-toggle not showing placeholder for input - #2 by twestrick