Skip to content

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

Description

@bodinaren

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions