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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.1.4-beta.4",
+  "version": "6.1.4-beta.5",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -114,11 +114,17 @@ const FormInput = ({
   customHeight,
   autocomplete,
   extraStyles,
-  removeFromValue,
+  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">
@@ -200,7 +206,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
-            onChange={e => console.log("e is", e) || fieldActions.set(e)}
+            onChange={value => setValue(value)}
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
@@ -226,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

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

@@ -31,7 +31,7 @@ const formConfig = {
       isValidMonth(0),
       dateAfterToday("MMYY", "month", true)
     ],
-    constraints: [onlyExpirationDate(), hasLength(0, 5)]
+    constraints: [onlyExpirationDate(), hasLength(0, 4)]
   },
   cvv: {
     validators: [required(), hasLength(3, 4)],