From 5c599f7effaca025a644b10876badcaeb6ea624f Mon Sep 17 00:00:00 2001
From: sundasnoreen12 <sundasnoreen12@gmail.com>
Date: Wed, 26 Feb 2025 23:55:13 +0500
Subject: [PATCH] fix: added checks both standard and vendor-prefixed autofill

---
 src/common-components/FormGroup.jsx | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/common-components/FormGroup.jsx b/src/common-components/FormGroup.jsx
index 7597a0c8..378cc789 100644
--- a/src/common-components/FormGroup.jsx
+++ b/src/common-components/FormGroup.jsx
@@ -7,25 +7,36 @@ import PropTypes from 'prop-types';
 
 const FormGroup = (props) => {
   const [hasFocus, setHasFocus] = useState(false);
-  const [isAutoFill, setIsAutoFill] = useState(true);
+  const [isAutoFill, setIsAutoFill] = useState(false);
   const inputRef = useRef(null);
 
   useEffect(() => {
-    const observer = new MutationObserver(() => {
+    const checkAutoFill = () => {
       if (inputRef.current) {
-        const isAutoFillField = inputRef.current.matches(':autofill');
+        // Check both standard and vendor-prefixed autofill
+        const isAutoFillField = inputRef.current.matches(
+          ':autofill, :-webkit-autofill',
+        );
         setIsAutoFill(isAutoFillField);
       }
-    });
-
+    };
+    const observer = new MutationObserver(checkAutoFill);
     if (inputRef.current) {
+      // Check immediately on mount
+      checkAutoFill();
+
+      // Configure observer to watch style changes only
       observer.observe(inputRef.current, {
         attributes: true,
-        childList: true,
-        subtree: true,
+        attributeFilter: ['style'], // Autofill often changes styles
       });
+      // Fallback check for browser timing issues
+      const timeoutId = setTimeout(checkAutoFill, 100);
+      return () => {
+        observer.disconnect();
+        clearTimeout(timeoutId);
+      };
     }
-
     return () => observer.disconnect();
   }, []);