@thecb/components 6.1.4-beta.2 → 6.1.4-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.1.4-beta.2",
+  "version": "6.1.4-beta.5",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -86,6 +86,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.6.0-beta.3"
+    "redux-freeform": "^5.6.0-beta.4"
   }
 }

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

@@ -114,10 +114,17 @@ const FormInput = ({
   customHeight,
   autocomplete,
   extraStyles,
+  removeFromValue, // regex of characters to remove before setting value
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
   const { isMobile } = useContext(ThemeContext);
+  const setValue = value => {
+    if (removeFromValue !== undefined) {
+      return fieldActions.set(value.replace(removeFromValue, ""));
+    }
+    return fieldActions.set(value);
+  };
 
   return (
     <Stack childGap="0.25rem">
@@ -199,7 +206,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
-            onChange={e => fieldActions.set(e)}
+            onChange={value => setValue(value)}
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
@@ -225,7 +232,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
-            onChange={e => fieldActions.set(e.target.value)}
+            onChange={e => setValue(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

@@ -140,6 +140,7 @@ const PaymentFormCard = ({
             formatter={expirationDateFormat}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             isNum
+            removeFromValue={/\//} // removes "/" from browser autofill
             autocomplete="cc-exp"
           />
           <FormInput