fix(input): do not float label because of slotted items

[ErikOnBike]

Issue number: resolves #28665

---

What is the current behavior?

The input label is floating if an element is slotted. This is especially annoying if a password toggle is present, since it will start floating the label (even when no input is available).

What is the new behavior?

A label will only float (if specified and) if it has a value or received focus.

Does this introduce a breaking change?

• Yes
• No

Other information

Screenshot before:

Screenshot after:

This issue also seems to fix issue #29449

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 20, 2024 0:24am

[ErikOnBike]

Changed the visual removal of slotted items to use 'visibility: hidden' to prevent changing the input component's size where 'display: none' could change the size.

[drolpi]

@tanner-reits any news? when will it be merged?

[tanner-reits]

Hey @ErikOnBike

Thanks for taking a stab at this! Unfortunately, hiding the slotted content until focus doesn't match the designs for Material Design (see demo here). We have a task to look into this internally, but I'm not sure when we'll be able to do so if you want to try to match that behavior.

[ErikOnBike]

Hey @ErikOnBike

Thanks for taking a stab at this! Unfortunately, hiding the slotted content until focus doesn't match the designs for Material Design (see demo here). We have a task to look into this internally, but I'm not sure when we'll be able to do so if you want to try to match that behavior.

Hi @tanner-reits,

You're completely right. I think I mixed up two issues and tried to solve both in one go. (Not very sensible ;-)
Although I now see why that might be the case. If the slotted elements remain visible, the label will overlap with the slotted (start) element. The label is placed in a wrapper before the input. It can't know the size of the slotted items and therefore will be left aligned, overlapping the slotted element.
This is more tricky to handle than just prevent it from floating when no input is available.