From c37b1247ca5a9de6223357ee5f7b91436ef426bc Mon Sep 17 00:00:00 2001 From: Kieran Nichols Date: Thu, 7 Nov 2024 11:04:43 -0500 Subject: [PATCH] fix(field): fixed a bug where the width could collapse while the inset label animation is executing (#730) --- src/lib/field/field-adapter.ts | 9 +++++++++ src/lib/field/field-constants.ts | 1 + 2 files changed, 10 insertions(+) diff --git a/src/lib/field/field-adapter.ts b/src/lib/field/field-adapter.ts index 0441519ec..99f31d7df 100644 --- a/src/lib/field/field-adapter.ts +++ b/src/lib/field/field-adapter.ts @@ -19,6 +19,7 @@ export interface IFieldAdapter extends IBaseAdapter { export class FieldAdapter extends BaseAdapter implements IFieldAdapter { private readonly _rootElement: HTMLElement; private readonly _containerElement: HTMLElement; + private readonly _inputContainerElement: HTMLElement; private readonly _labelElement: HTMLElement; private readonly _popoverIconElement: HTMLElement; private readonly _focusIndicatorElement: IFocusIndicatorComponent; @@ -31,6 +32,7 @@ export class FieldAdapter extends BaseAdapter implements IField super(component); this._rootElement = getShadowElement(component, FIELD_CONSTANTS.selectors.ROOT); this._containerElement = getShadowElement(component, FIELD_CONSTANTS.selectors.CONTAINER); + this._inputContainerElement = getShadowElement(component, FIELD_CONSTANTS.selectors.INPUT_CONTAINER); this._labelElement = getShadowElement(component, FIELD_CONSTANTS.selectors.LABEL); this._popoverIconElement = getShadowElement(component, FIELD_CONSTANTS.selectors.POPOVER_ICON); this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName) as IFocusIndicatorComponent; @@ -70,11 +72,18 @@ export class FieldAdapter extends BaseAdapter implements IField return; } + // Temporarily lock the input container element width to its current width before the animation starts + // to ensure that the element cannot collapse while the animation is executing. The width will be + // removed after the animation completes. + const { width: inputContainerWidth } = this._inputContainerElement.getBoundingClientRect(); + this._inputContainerElement.style.setProperty('width', `${inputContainerWidth}px`); + const className = value ? FIELD_CONSTANTS.classes.FLOATING_IN : FIELD_CONSTANTS.classes.FLOATING_OUT; const animationName = value ? FIELD_CONSTANTS.animations.FLOAT_IN_LABEL : FIELD_CONSTANTS.animations.FLOAT_OUT_LABEL; const animationEndListener: EventListener = (evt: AnimationEvent) => { if (evt.animationName === animationName) { removeClass(className, this._rootElement); + this._inputContainerElement.style.removeProperty('width'); this._rootElement.removeEventListener('animationend', animationEndListener); } }; diff --git a/src/lib/field/field-constants.ts b/src/lib/field/field-constants.ts index 0e7a46f80..7c4041ddb 100644 --- a/src/lib/field/field-constants.ts +++ b/src/lib/field/field-constants.ts @@ -30,6 +30,7 @@ const classes = { const selectors = { ROOT: '#root', CONTAINER: '#container', + INPUT_CONTAINER: '#input', LABEL: '#label', POPOVER_ICON: '#popover-icon', LABEL_ELEMENTS: `:where(label, ${LABEL_CONSTANTS.elementName})`,