Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
rulaman123 opened this issue Dec 7, 2023 · 8 comments · May be fixed by #29948
Open
3 tasks done

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

rulaman123 opened this issue Dec 7, 2023 · 8 comments · May be fixed by #29948
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@rulaman123
Copy link

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

@ionitron-bot ionitron-bot bot added the triage label Dec 7, 2023
@liamdebeasi liamdebeasi changed the title bug: ion-input with labelPlacement floating not working with slots bug: input floating label is always floating when using start/end slots Dec 7, 2023
@liamdebeasi liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report labels Dec 7, 2023
@ionitron-bot ionitron-bot bot removed the triage label Dec 7, 2023
@richardliebmann
Copy link

+1

@5uper
Copy link

5uper commented Apr 26, 2024

+1

2 similar comments
@Fearcoder
Copy link

+1

@hienpvptit
Copy link

+1

@VerburgtJimmy
Copy link

VerburgtJimmy commented May 21, 2024

Is there someone from the team who is able to look at this issue? The issue persists in ionic 8 when i have my code like this:

<ion-input label="Password" labelPlacement="floating" type="password> 
       <ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>

Just looked into the code and it seems there is already a TODO for this issue. So it is just a question of when it is done:

* TODO(FW-5592): Remove hasStartEndSlots condition
*/
const labelShouldFloat =
labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));

@VerburgtJimmy
Copy link

+1

2 similar comments
@YounesAmalouSSCA
Copy link

+1

@beliven-davide-lorigliola

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants