From 464dee4c6bdb5dc47f8a9b657d188788fd5e6531 Mon Sep 17 00:00:00 2001
From: Maksim Ivanov <omaxphp@yandex.ru>
Date: Mon, 2 Sep 2024 17:37:24 +0300
Subject: [PATCH] fix(legacy): trigger transform placeholder when using
 autofill (#8779)

---
 .../primitive-textfield.component.ts                   | 10 ++++++++++
 .../primitive-textfield/primitive-textfield.style.less |  6 ++++++
 2 files changed, 16 insertions(+)

diff --git a/projects/legacy/components/primitive-textfield/primitive-textfield.component.ts b/projects/legacy/components/primitive-textfield/primitive-textfield.component.ts
index e64b55bfbdad..13c37eead705 100644
--- 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
index bc1cec6bc577..5ce0b0a039e0 100644
--- 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,