diff --git a/BREAKING.md b/BREAKING.md index 8715719907a..3ac55f72f3f 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -82,6 +82,8 @@ Apps on `moduleResolution: "node"` (classic) and webpack 4 keep resolving throug

Input

+**`autocorrect` Property Type Changed to Boolean** + The `autocorrect` property on `ion-input` is now a `boolean` and defaults to `false`. It was previously typed as `'on' | 'off'` with a default of `'off'`. This resolves a type conflict introduced when TypeScript 5.9 added `autocorrect: boolean` to the DOM `HTMLElement` interface. The string form no longer behaves the same way. Because an HTML attribute coerces to `true` for any non-empty string, `autocorrect="off"` now evaluates to `true` (autocorrect enabled). Migrate to the boolean property: @@ -89,6 +91,43 @@ The string form no longer behaves the same way. Because an HTML attribute coerce - Remove the attribute to keep autocorrect disabled (the default). - Use a property binding to enable it: `[autocorrect]="true"` (Angular), `autocorrect={true}` (React), or `:autocorrect="true"` (Vue). +**Floating Label Behavior** + +Floating labels no longer automatically float when the input contains slotted content. Labels float only when the input is focused or has a value. + +**Internal DOM Structure Changes** + +The internal DOM structure has been reorganized to support floating labels with slotted content. + +Added: +- `.input-start` +- `.input-control` +- `.input-end` + +Restructured: +- `.label-text-wrapper` moved from `.input-wrapper` into `.input-control` +- `.native-wrapper` moved from `.input-wrapper` into `.input-control` +- Start slot moved from `.native-wrapper` into `.input-start` +- Clear button icon moved from `.native-wrapper` into `.input-end` +- End slot moved from `.native-wrapper` into `.input-end` +- `.input-control` now contains the label text and native `input`, while start/end content is separated into dedicated wrappers + +Update your selectors to account for these structural changes: + +```diff +-ion-input .input-wrapper .native-wrapper { } ++ion-input .input-control .native-wrapper { } + +-ion-input .input-wrapper .native-wrapper [slot="start"] { } ++ion-input .input-start [slot="start"] { } + +-ion-input .input-wrapper .native-wrapper .input-clear-icon { } ++ion-input .input-end .input-clear-icon { } + +-ion-input .input-wrapper .native-wrapper [slot="end"] { } ++ion-input .input-end [slot="end"] { } +``` +

Legacy Picker

- `ion-picker-legacy` and `ion-picker-legacy-column` have been removed. The legacy picker component has been replaced with an inline picker component. diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss index be54121d0e0..d6cda674e58 100644 --- a/core/src/components/input/input.md.outline.scss +++ b/core/src/components/input/input.md.outline.scss @@ -9,6 +9,15 @@ --padding-start: 16px; --padding-end: 16px; + /** + * The measured width of the start container, as a negative offset + * in LTR and a positive one in RTL. Written to the host by the + * start container controller, so renaming it here requires renaming + * it there too. Declared with a default so the label is positioned + * correctly before the first measurement runs. + */ + --internal-start-container-adjustment: 0px; + min-height: 56px; } @@ -64,6 +73,15 @@ border-bottom: none; } +/** + * The resting label is positioned relative to the control so it can size to + * the space between the start and end slots. When floating, the label needs + * to escape the control and position itself relative to the wrapper instead. + */ +:host(.input-fill-outline:not(.label-floating)) .input-control { + position: relative; +} + :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper, :host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper { @include transform-origin(start, top); @@ -71,10 +89,11 @@ position: absolute; /** - * Label text should not extend - * beyond the bounds of the input. + * While resting this is the width of the text input, which already + * excludes the start and end slots. Once the label floats the + * containing block becomes the wrapper and the rule below takes over. */ - max-width: calc(100% - var(--padding-start) - var(--padding-end)); + max-width: 100%; } /** @@ -90,7 +109,7 @@ * This makes the label sit above the input. */ :host(.label-floating.input-fill-outline) .label-text-wrapper { - @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale})); + @include transform(translate(var(--internal-start-container-adjustment, 0px), -32%), scale(#{$form-control-label-stacked-scale})); @include margin(0); /** @@ -100,16 +119,6 @@ max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale}); } -/** - * This ensures that the input does not - * overlap the floating label while still - * remaining visually centered. - */ -:host(.input-fill-outline.input-label-placement-stacked) input, -:host(.input-fill-outline.input-label-placement-floating) input { - @include margin(6px, 0, 6px, 0); -} - // Input Fill: Outline Outline Container // ---------------------------------------------------------------- diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 476cb012bee..e24bf990eb9 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -189,7 +189,6 @@ // -------------------------------------------------- .input-clear-icon { - @include margin(auto); @include padding(0); @include background-position(center); @@ -259,6 +258,25 @@ line-height: normal; } +// Input Control (Label + Input) +// ---------------------------------------------------------------- + +.input-control { + display: flex; + + flex-grow: 1; + + width: 100%; + + /** + * Allows the control to shrink below the label and input's intrinsic + * width, preventing the start and end slots from being pushed outside + * the wrapper. The label and input truncate independently, so it can + * use whatever space remains after accounting for the slots. + */ + min-width: 0; +} + // Input Native Wrapper // ---------------------------------------------------------------- @@ -269,12 +287,37 @@ flex-grow: 1; - // ensure start/end slot content is vertically centered - align-items: center; - width: 100%; } +/** + * When the label sits beside the input, the label should size to its content + * and the input should take the remaining space. A zero flex basis prevents + * the input from requesting its full width and forcing the label to shrink. + * Stacked and floating placements use a column layout, so their flex basis + * controls height instead and does not need to be overridden. + */ +:host(.input-label-placement-start) .native-wrapper, +:host(.input-label-placement-end) .native-wrapper, +:host(.input-label-placement-fixed) .native-wrapper { + flex: 1 1 0; +} + +// Input Start/End Containers +// ---------------------------------------------------------------- + +.input-start, +.input-end { + display: flex; + + position: relative; + + flex-shrink: 0; + + // Ensure start/end content is vertically centered + align-items: center; +} + // Input Highlight // ---------------------------------------------------------------- @@ -399,6 +442,13 @@ align-items: center; + /** + * Allows the label to shrink below its intrinsic content width. + * Without this the label keeps its full width and can push the + * input and end slot outside the wrapper. + */ + min-width: 0; + /** * Label text should not extend * beyond the bounds of the input. @@ -419,6 +469,18 @@ pointer-events: none; } +/** + * When start/end slots are added or removed, we temporarily + * disable the label transition to prevent the floating label + * from animating as its position is adjusted. + * + * This class is applied by the start container controller, so + * renaming it here requires renaming it there too. + */ +:host(.skip-label-transition) .label-text-wrapper { + transition: none; +} + /** * We need to use two elements instead of * one. The .label-text-wrapper is responsible @@ -467,7 +529,7 @@ * Label is on the left of the input in LTR and * on the right in RTL. */ -:host(.input-label-placement-start) .input-wrapper { +:host(.input-label-placement-start) .input-control { flex-direction: row; } @@ -487,7 +549,7 @@ * Label is on the right of the input in LTR and * on the left in RTL. */ -:host(.input-label-placement-end) .input-wrapper { +:host(.input-label-placement-end) .input-control { flex-direction: row-reverse; } @@ -532,10 +594,9 @@ * Floating: Label sits over the input when the input has no * value and is blurred. Label sits above the input and is scaled * down when the input is focused or has a value. - * */ -:host(.input-label-placement-stacked) .input-wrapper, -:host(.input-label-placement-floating) .input-wrapper { +:host(.input-label-placement-stacked) .input-control, +:host(.input-label-placement-floating) .input-control { flex-direction: column; align-items: start; } @@ -559,15 +620,6 @@ z-index: 2; } -/** - * Ensures the input does not - * overlap the label. - */ -:host(.input-label-placement-stacked) input, -:host(.input-label-placement-floating) input { - @include margin(1px, 0, 0, 0); -} - /** * This makes the label sit over the input * when the input is blurred and has no value. diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 89efdce43dd..dbbff605692 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -13,8 +13,8 @@ import { forceUpdate, h, } from '@stencil/core'; -import type { NotchController } from '@utils/forms'; -import { createNotchController, checkInvalidState } from '@utils/forms'; +import type { NotchController, StartContainerController } from '@utils/forms'; +import { createNotchController, createStartContainerController, checkInvalidState } from '@utils/forms'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers'; import { createSlotMutationController } from '@utils/slot-mutation-controller'; @@ -54,6 +54,8 @@ export class Input implements ComponentInterface { private slotMutationController?: SlotMutationController; private notchController?: NotchController; private notchSpacerEl: HTMLElement | undefined; + private startContainerController?: StartContainerController; + private startContainerEl: HTMLElement | undefined; private originalIonInput?: EventEmitter; @@ -408,6 +410,8 @@ export class Input implements ComponentInterface { const { el } = this; this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => { + this.startContainerController?.calculateStartContainerWidth(); + this.setSlottedLabelId(); forceUpdate(this); }); @@ -419,6 +423,16 @@ export class Input implements ComponentInterface { () => this.labelSlot ); + this.startContainerController = createStartContainerController( + el, + () => this.startContainerEl, + () => { + return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline'; + } + ); + + this.startContainerController.calculateStartContainerWidth(); + // Watch for class changes to update validation state if (Build.isBrowser && typeof MutationObserver !== 'undefined') { this.validationObserver = new MutationObserver(() => { @@ -464,6 +478,7 @@ export class Input implements ComponentInterface { componentDidRender() { this.notchController?.calculateNotchWidth(); + this.startContainerController?.calculateStartContainerWidth(); } disconnectedCallback() { @@ -485,6 +500,11 @@ export class Input implements ComponentInterface { this.notchController = undefined; } + if (this.startContainerController) { + this.startContainerController.destroy(); + this.startContainerController = undefined; + } + // Clean up validation observer to prevent memory leaks if (this.validationObserver) { this.validationObserver.disconnect(); @@ -796,61 +816,47 @@ export class Input implements ComponentInterface { } /** - * Stops propagation when the label is clicked, - * otherwise, two clicks will be triggered. + * Stops propagation for clicks on the input's own content (label text, + * input field) to prevent double-click events. Allows clicks on slotted + * content to propagate so event delegation works for parent handlers. + * + * Only slots belonging directly to this input should be considered. + * The input itself may have a slot attribute when placed in an item + * or toolbar, which does not make its content slotted content. */ private onLabelClick = (ev: MouseEvent) => { - // Only stop propagation if the click was directly on the label - // and not on the input or other child elements - if (ev.target === ev.currentTarget) { + const target = ev.target as HTMLElement; + const slotted = target.closest('[slot="start"], [slot="end"]'); + + if (slotted === null || slotted === this.el || !this.el.contains(slotted)) { ev.stopPropagation(); } }; /** - * Renders the border container - * when fill="outline". + * Renders the outline border with a notch for the label. */ - private renderLabelContainer() { - const mode = getIonMode(this); - const hasOutlineFill = mode === 'md' && this.fill === 'outline'; - - if (hasOutlineFill) { - /** - * The outline fill has a special outline - * that appears around the input and the label. - * Certain stacked and floating label placements cause the - * label to translate up and create a "cut out" - * inside of that border by using the notch-spacer element. - */ - return [ -
-
-
- + private renderOutlineContainer() { + return ( +
+
+
+ -
-
, - this.renderLabel(), - ]; - } - - /** - * If not using the outline style, - * we can render just the label. - */ - return this.renderLabel(); +
+
+
+ ); } 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); @@ -859,27 +865,14 @@ export class Input implements ComponentInterface { const clearIconData = clearInputIcon ?? defaultClearIcon; const hasValue = this.hasValue(); - const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null; + const hasOutlineFill = mode === 'md' && fill === 'outline'; /** * If the label is stacked, it should always sit above the input. * For floating labels, the label should move above the input if - * the input has a value, is focused, or has anything in either - * the start or end slot. - * - * If there is content in the start slot, the label would overlap - * it if not forced to float. This is also applied to the end slot - * because with the default or solid fills, the input is not - * vertically centered in the container, but the label is. This - * causes the slots and label to appear vertically offset from each - * 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 + * the input has a value or is focused. */ - const labelShouldFloat = - labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots)); + const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus)); return ( - {this.renderLabelContainer()} -
+ {hasOutlineFill && this.renderOutlineContainer()} +
(this.startContainerEl = el)}> - (this.nativeInput = input)} - id={inputId} - disabled={disabled} - autoCapitalize={this.autocapitalize} - autoComplete={this.autocomplete} - autoCorrect={this.autocorrect ? 'on' : 'off'} - autoFocus={this.autofocus} - enterKeyHint={this.enterkeyhint} - inputMode={this.inputmode} - min={this.min} - max={this.max} - minLength={this.minlength} - maxLength={this.maxlength} - multiple={this.multiple} - name={this.name} - pattern={this.pattern} - placeholder={this.placeholder || ''} - readOnly={readonly} - required={this.required} - spellcheck={this.spellcheck} - step={this.step} - type={this.type} - value={value} - onInput={this.onInput} - onChange={this.onChange} - onBlur={this.onBlur} - onFocus={this.onFocus} - onKeyDown={this.onKeydown} - onCompositionstart={this.onCompositionStart} - onCompositionend={this.onCompositionEnd} - aria-describedby={this.getHintTextID()} - aria-invalid={this.isInvalid ? 'true' : undefined} - aria-labelledby={this.getLabelledById()} - {...this.inheritedAttributes} - /> +
+
+ {this.renderLabel()} +
+ (this.nativeInput = input)} + id={inputId} + disabled={disabled} + autoCapitalize={this.autocapitalize} + autoComplete={this.autocomplete} + autoCorrect={this.autocorrect ? 'on' : 'off'} + autoFocus={this.autofocus} + enterKeyHint={this.enterkeyhint} + inputMode={this.inputmode} + min={this.min} + max={this.max} + minLength={this.minlength} + maxLength={this.maxlength} + multiple={this.multiple} + name={this.name} + pattern={this.pattern} + placeholder={this.placeholder || ''} + readOnly={readonly} + required={this.required} + spellcheck={this.spellcheck} + step={this.step} + type={this.type} + value={value} + onInput={this.onInput} + onChange={this.onChange} + onBlur={this.onBlur} + onFocus={this.onFocus} + onKeyDown={this.onKeydown} + onCompositionstart={this.onCompositionStart} + onCompositionend={this.onCompositionEnd} + aria-describedby={this.getHintTextID()} + aria-invalid={this.isInvalid ? 'true' : undefined} + aria-labelledby={this.getLabelledById()} + {...this.inheritedAttributes} + /> +
+
+
{this.clearInput && !readonly && !disabled && (