search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.48k stars 13.53k forks source link

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

Open bodinaren opened 2 weeks ago

bodinaren commented 2 weeks ago

Prerequisites

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 commented 2 weeks ago

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.