fix(legacy): trigger transform placeholder when using autofill (#8779)

taiga-family · Sep 2, 2024 · 464dee4 · 464dee4
1 parent 6604fd6
commit 464dee4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/projects/legacy/components/primitive-textfield/primitive-textfield.component.ts b/projects/legacy/components/primitive-textfield/primitive-textfield.component.ts
@@ -62,6 +62,7 @@ export const TUI_ICON_START_PADDINGS: Record<TuiSizeL | TuiSizeS, number> = {
             'options.appearance() === "table" || controller.labelOutside',
         '(focusin)': 'onFocused(true)',
         '(focusout)': 'onFocused(false)',
+        '(transitionstart.capture)': 'transitionStartHandler($event)',
     },
 })
 export class TuiPrimitiveTextfieldComponent
@@ -271,6 +272,15 @@ export class TuiPrimitiveTextfieldComponent
         nativeFocusableElement.focus();
     }
 
+    protected transitionStartHandler({propertyName, target}: TransitionEvent): void {
+        const matchedAutofill =
+            propertyName.includes('box-shadow') && (target as Element)?.matches('input');
+
+        if (matchedAutofill) {
+            this.onAutofilled(!this.autofilled);
+        }
+    }
+
     protected onAutofilled(autofilled: boolean): void {
         this.updateAutofilled(autofilled);
     }

diff --git a/projects/legacy/components/primitive-textfield/primitive-textfield.style.less b/projects/legacy/components/primitive-textfield/primitive-textfield.style.less
@@ -4,6 +4,12 @@
 .textfield();
 
 :host {
+    ::ng-deep input {
+        // @note: need for listen (transitionstart) event
+        // don't use more than one listener property
+        transition: box-shadow 0.01s;
+    }
+
     &._autofilled {
         &[data-size='s'] .t-placeholder,
         &._label-outside .t-placeholder,