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.43k stars 13.53k forks source link

bug: input floating label is always floating when using start/end slots #28665

Open rulaman123 opened 5 months ago

rulaman123 commented 5 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

ion-input with labelPlacement="floating" not working as intended with slotted ion-button inside. The label is fixed on top even with pristine input.

input bug

The label of the first ion-input without slotted button is correct.

Expected Behavior

When ion-input has or loses focus the label should change its position.

Steps to Reproduce

  1. create an ion-input wit labelPlacement="floating"
  2. create an ion-button with slot="end" inside

Code Reproduction URL

No response

Ionic Info

Ionic: Ionic CLI : 7.1.5 Ionic Framework : @ionic/angular 7.6.0 @angular-devkit/build-angular : 16.2.8 @angular-devkit/schematics : 16.2.8 @angular/cli : 16.2.8 @ionic/angular-toolkit : 10.0.0

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.4

System: NodeJS : v20.10.0 npm : 10.2.3 OS : Windows 10

Additional Information

No response

richardliebmann commented 2 weeks ago

+1

5uper commented 1 week ago

+1