@thecb/components 10.7.2 → 10.7.3

package/package.json

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

package/src/components/atoms/dropdown/Dropdown.js

@@ -238,6 +238,17 @@ const Dropdown = ({
     }
   };
 
+  const handleOnBlur = inputVal => {
+    const selectedRefExists =
+      selectedRef !== undefined && selectedRef.current !== null;
+    const inputRequired = options.required || isRequired;
+    const hasSelectedValue = value || selectedRefExists;
+    // Select the empty value to trigger a validation error if it's required.
+    if (inputRequired && !hasSelectedValue && inputVal === "") {
+      onSelect("");
+    }
+  };
+
   useEffect(() => {
     const selectedRefExists =
       selectedRef !== undefined && selectedRef.current !== null;
@@ -357,6 +368,7 @@ const Dropdown = ({
             setInputChangedByAutofill(true);
           }
         }}
+        onBlur={e => handleOnBlur(e.target.value)}
         padding="12px 25px 12px 12px"
         placeholder={getSelection()}
         required={options.required || isRequired}

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

@@ -121,6 +121,7 @@ const FormInput = ({
 }) => {
   const [showPassword, setShowPassword] = useState(false);
   const { isMobile } = useContext(ThemeContext);
+
   const setValue = value => {
     if (removeFromValue !== undefined) {
       return fieldActions.set(value.replace(removeFromValue, ""));
@@ -128,6 +129,13 @@ const FormInput = ({
     return fieldActions.set(value);
   };
 
+  const handleOnBlur = value => {
+    // Sets the empty value to trigger a validation error if it's required.
+    if (isRequired && value === "") {
+      setValue("");
+    }
+  };
+
   return (
     <Stack childGap="0.25rem">
       <Box padding="0">
@@ -204,6 +212,7 @@ const FormInput = ({
               (field.hasErrors && showErrors)
             }
             onChange={value => setValue(value)}
+            onBlur={e => handleOnBlur(e.target.value)}
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
@@ -231,6 +240,7 @@ const FormInput = ({
               (field.hasErrors && showErrors)
             }
             onChange={e => setValue(e.target.value)}
+            onBlur={e => handleOnBlur(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -49,6 +49,7 @@ const PaymentFormACH = ({
     [isRoutingNumber.error]: "Invalid routing number"
   };
   const confirmRoutingNumberErrors = {
+    [required.error]: "Confirm routing number is required",
     [matchesField.error]:
       "Confirm routing number field must match routing number"
   };
@@ -57,6 +58,7 @@ const PaymentFormACH = ({
     [hasLength.error]: "Account number must be between 5 and 17 digits"
   };
   const confirmAccountNumberErrors = {
+    [required.error]: "Confirm account number is required",
     [matchesField.error]:
       "Confirm account number field must match account number"
   };

package/src/components/molecules/payment-form-ach/PaymentFormACH.state.js

@@ -16,7 +16,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   confirmRoutingNumber: {
-    validators: [matchesField("routingNumber")],
+    validators: [required(), matchesField("routingNumber")],
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
@@ -24,7 +24,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
-    validators: [matchesField("accountNumber")],
+    validators: [required(), matchesField("accountNumber")],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   accountType: {