@thecb/components 10.7.3-beta.0 → 10.7.4-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.7.3-beta.0",
+  "version": "10.7.4-beta.0",
   "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

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import styled, { ThemeContext, css } from "styled-components";
 import { FormattedInput } from "formatted-input";
 import { fallbackValues } from "./FormLayouts.theme.js";
@@ -120,22 +120,35 @@ const FormInput = ({
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
+  const [initialValue, setInitialValue] = useState(field?.rawValue || "");
   const { isMobile } = useContext(ThemeContext);
 
-  const setValue = value => {
-    if (removeFromValue !== undefined) {
-      return fieldActions.set(value.replace(removeFromValue, ""));
+  const setValue = currentValue => {
+    if (currentValue !== initialValue) {
+      setInitialValue(currentValue);
     }
-    return fieldActions.set(value);
   };
 
-  const handleOnBlur = value => {
-    // Sets the empty value to trigger a validation error if it's required.
-    if (isRequired && value === "") {
-      setValue("");
+  const handleBlur = currentValue => {
+    if (currentValue === "" || currentValue !== initialValue) {
+      if (currentValue && removeFromValue !== undefined) {
+        fieldActions.set(currentValue.replace(removeFromValue, ""));
+      } else {
+        fieldActions.set(currentValue);
+      }
     }
   };
 
+  useEffect(() => {
+    if (initialValue) {
+      if (removeFromValue !== undefined) {
+        fieldActions.set(initialValue.replace(removeFromValue, ""));
+      } else {
+        fieldActions.set(initialValue);
+      }
+    }
+  }, [initialValue]);
+
   return (
     <Stack childGap="0.25rem">
       <Box padding="0">
@@ -211,8 +224,9 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
+            onFocus={e => setValue(e.target?.value)}
             onChange={value => setValue(value)}
-            onBlur={e => handleOnBlur(e.target.value)}
+            onBlur={e => handleBlur(e.target.value)}
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
@@ -240,7 +254,7 @@ const FormInput = ({
               (field.hasErrors && showErrors)
             }
             onChange={e => setValue(e.target.value)}
-            onBlur={e => handleOnBlur(e.target.value)}
+            onBlur={e => handleBlur(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}

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