bug: ion-input-password-toggle causes label to float even when input is empty

[bodinaren]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When an <ion-input type="password" label-placement="floating"> is empty but has a ion-input-password-toggle the label is floating, something which normally only happens when the input has a value.

Expected Behavior

I expect the label to be placed the same as if the ion-input-password-toggle wasn't used so that all empty inputs looks the same.

Steps to Reproduce

The problem is immediately visible in the 3rd input in the stackblitz reproduction.

Code Reproduction URL

https://stackblitz.com/edit/angular-k1wdev?file=src%2Fapp%2Fexample.component.html

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\bodin\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/react 8.0.1

Capacitor:

Capacitor CLI : 5.5.1 @capacitor/android : 5.5.1 @capacitor/core : 5.5.1 @capacitor/ios : 5.5.1

Utility:

cordova-res : not installed globally native-run : 1.7.3

System:

NodeJS : v20.11.1 (C:\Program Files\nodejs\node.exe) npm : 10.7.0 OS : Windows 10 (actually 11, Ionic info reports wrong)

Additional Information

Given the comment here the error appears to be a known one, or at least an expected one, but has remained untouched for 6 months.

https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/input/input.tsx#L718-L721

[thetaPC]

Thank you for submitting the issue!

I was able to confirm that this is an issue. We plan on allowing labels to float when slots are present. We'll update this when there's more information.

[yannisvanlaerhoven3]

Would love a fix 🙏

[ruettenm]

The issue is still open. Do you already have a plan when it will be fixed?