fix(experience): shrink input field when autofilled by the browser (#6280)

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 {}
+}
+

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);
     }
   }, []);