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

package/dist/index.esm.js

@@ -27033,20 +27033,35 @@ var FormInput = function FormInput(_ref15) {
     _useState2 = _slicedToArray(_useState, 2),
     showPassword = _useState2[0],
     setShowPassword = _useState2[1];
+  var _useState3 = useState((field === null || field === void 0 ? void 0 : field.rawValue) || ""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    initialValue = _useState4[0],
+    setInitialValue = _useState4[1];
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
-  var setValue = function setValue(value) {
-    if (removeFromValue !== undefined) {
-      return fieldActions.set(value.replace(removeFromValue, ""));
+  var setValue = function setValue(currentValue) {
+    if (currentValue !== initialValue) {
+      setInitialValue(currentValue);
     }
-    return fieldActions.set(value);
   };
-  var handleOnBlur = function handleOnBlur(value) {
-    // Sets the empty value to trigger a validation error if it's required.
-    if (isRequired && value === "") {
-      setValue("");
+  var handleBlur = function handleBlur(currentValue) {
+    if (currentValue === "" || currentValue !== initialValue) {
+      if (currentValue && removeFromValue !== undefined) {
+        fieldActions.set(currentValue.replace(removeFromValue, ""));
+      } else {
+        fieldActions.set(currentValue);
+      }
     }
   };
+  useEffect$1(function () {
+    if (initialValue) {
+      if (removeFromValue !== undefined) {
+        fieldActions.set(initialValue.replace(removeFromValue, ""));
+      } else {
+        fieldActions.set(initialValue);
+      }
+    }
+  }, [initialValue]);
   return /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -27097,11 +27112,15 @@ var FormInput = function FormInput(_ref15) {
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
+    onFocus: function onFocus(e) {
+      var _e$target;
+      return setValue((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+    },
     onChange: function onChange(value) {
       return setValue(value);
     },
     onBlur: function onBlur(e) {
-      return handleOnBlur(e.target.value);
+      return handleBlur(e.target.value);
     },
     type: type,
     value: field.rawValue,
@@ -27124,7 +27143,7 @@ var FormInput = function FormInput(_ref15) {
       return setValue(e.target.value);
     },
     onBlur: function onBlur(e) {
-      return handleOnBlur(e.target.value);
+      return handleBlur(e.target.value);
     },
     type: type === "password" && showPassword ? "text" : type,
     value: field.rawValue,
@@ -48581,6 +48600,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     isNum: true,
     autocompleteValue: "cc-number",
+    name: "cc-number",
     isRequired: true
   }), /*#__PURE__*/React.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",