diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 80ebc9896ae..0bdcb5c4aaa 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -593,6 +593,13 @@ max-width: calc(100% / #{$form-control-label-stacked-scale}); } +/** + * This removes the slotted items on floating label when empty and no focus. + */ +:host(.input-label-placement-floating:not(.has-focus):not(.has-value)) .native-wrapper > [slot] { + display: none; +} + // Start/End Slots // ---------------------------------------------------------------- diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index f2430eabf32..42e926e173b 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -689,7 +689,7 @@ export class Input implements ComponentInterface { } render() { - const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this; + const { disabled, fill, readonly, shape, inputId, labelPlacement, hasFocus, clearInputIcon } = this; const mode = getIonMode(this); const value = this.getValue(); const inItem = hostContext('ion-item', this.el); @@ -698,7 +698,6 @@ export class Input implements ComponentInterface { const clearIconData = clearInputIcon ?? defaultClearIcon; const hasValue = this.hasValue(); - const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null; /** * If the label is stacked, it should always sit above the input. @@ -714,11 +713,9 @@ export class Input implements ComponentInterface { * other when the label isn't floating above the input. This doesn't * apply to the outline fill, but this was not accounted for to keep * things consistent. - * - * TODO(FW-5592): Remove hasStartEndSlots condition */ const labelShouldFloat = - labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots)); + labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus)); return (