From 160417159ad870b63c4911218942bee42f940a0e Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Fri, 19 Jul 2024 14:50:21 +0800
Subject: [PATCH] fix(experience): shrink input field when autofilled by the
 browser

---
 .../InputFields/InputField/index.module.scss  | 24 +++++++++++++++++++
 .../InputFields/InputField/index.tsx          |  9 +++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/experience/src/components/InputFields/InputField/index.module.scss b/packages/experience/src/components/InputFields/InputField/index.module.scss
index 967acc82ebc..a63504c1fc1 100644
--- a/packages/experience/src/components/InputFields/InputField/index.module.scss
+++ b/packages/experience/src/components/InputFields/InputField/index.module.scss
@@ -44,6 +44,15 @@
         transition: background-color 999999s ease-in-out 0s;
         background-color: transparent;
       }
+
+      &:-webkit-autofill {
+        /*
+         * Define a void transition css rule on the desired <input> element once it is :-webkit-autofilled.
+         * JavaScript will then be able to hook onto the 'animationstart' event.
+         * see https://stackoverflow.com/questions/11708092/detecting-browser-autofill/41530164#41530164
+         */
+        animation-name: onAutoFillStart;
+      }
     }
 
     .suffix {
@@ -115,3 +124,18 @@
     }
   }
 }
+
+
+/*
+* Define a void transition css rule on the desired <input> element once it is :-webkit-autofilled.
+* JavaScript will then be able to hook onto the 'animationstart' event.
+* see https://stackoverflow.com/questions/11708092/detecting-browser-autofill/41530164#41530164
+*/
+@keyframes onAutoFillStart {
+  /* stylelint-disable-next-line block-no-empty */
+  from {}
+
+  /* stylelint-disable-next-line block-no-empty */
+  to {}
+}
+
diff --git a/packages/experience/src/components/InputFields/InputField/index.tsx b/packages/experience/src/components/InputFields/InputField/index.tsx
index 78845f2b80a..a12c1d786d3 100644
--- a/packages/experience/src/components/InputFields/InputField/index.tsx
+++ b/packages/experience/src/components/InputFields/InputField/index.tsx
@@ -65,10 +65,15 @@ const InputField = (
 
   /**
    * Fix the issue that the input field doesn't have the active style when the autofill value is set.
-   * Modern browsers will trigger an animation event when the input field is autofilled.
+   * We have define a void transition css rule on the input element once it is `:-webkit-autofill`ed.
+   * Hook onto this 'animationstart' event to detect the autofill start.
+   * see https://stackoverflow.com/questions/11708092/detecting-browser-autofill/41530164#41530164
    */
   const handleAnimationStart = useCallback((event: AnimationEvent<HTMLInputElement>) => {
-    if (event.animationName === 'onautofillstart') {
+    /**
+     * Because SCSS adds some random characters to the ‘onAutoFillStart’ animation name during the build process, we can’t use the exact name here.
+     */
+    if (event.animationName.includes('onAutoFillStart')) {
       setHasValue(true);
     }
   }, []);