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.

Sign up for GitHub

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

Jump to bottom

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
@averyjohnston averyjohnston mentioned this issue Jan 8, 2024
Closed
3 tasks
@liamdebeasi liamdebeasi mentioned this issue Mar 25, 2024
Closed
3 tasks
@richardliebmann
Copy link

+1

@trydofor trydofor mentioned this issue Apr 25, 2024
Open
@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 •
edited
Loading

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:

ionic-framework/core/src/components/input/input.tsx

Lines 718 to 721 in 05f857a

* 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
Copy link

+1

@brandyscarney brandyscarney mentioned this issue Aug 7, 2024
Closed
3 tasks
@ErikOnBike ErikOnBike mentioned this issue Oct 18, 2024
Open
3 tasks
ErikOnBike added a commit to ErikOnBike/ionic-framework that referenced this issue Oct 18, 2024
@ErikOnBike
Fix ionic-team#28665: do not float label because of slotted items
4c54cf7
This was referenced Oct 18, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(input): do not float label because of slotted items ErikOnBike/ionic-framework
9 participants
@richardliebmann @5uper @liamdebeasi @Fearcoder @hienpvptit @VerburgtJimmy @rulaman123 @beliven-davide-lorigliola @YounesAmalouSSCA