@thecb/components 10.7.6-beta.0 → 10.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.7.6-beta.0",
+  "version": "10.7.6",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/form-layouts/FormInput.js

@@ -120,6 +120,7 @@ const FormInput = ({
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const { isMobile } = useContext(ThemeContext);
 
   const setValue = value => {
@@ -134,6 +135,7 @@ const FormInput = ({
     if (isRequired && value === "") {
       setValue("");
     }
+    setIsFocused(false);
   };
 
   return (
@@ -226,6 +228,15 @@ const FormInput = ({
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
             required={isRequired}
+            // Additional handler to detect autofilled values
+            {...(autocompleteValue && {
+              onFocus: e => {
+                if (!isFocused) {
+                  setValue(e.target?.value);
+                  setIsFocused(true);
+                }
+              }
+            })}
             {...props}
           />
         ) : (

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -134,6 +134,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          name="cc-number"
           isRequired={true}
         />
         <FormInputRow