@thecb/components 10.7.3 → 10.7.4-beta.0

package/dist/index.cjs.js

@@ -27041,20 +27041,35 @@ var FormInput = function FormInput(_ref15) {
     _useState2 = _slicedToArray(_useState, 2),
     showPassword = _useState2[0],
     setShowPassword = _useState2[1];
+  var _useState3 = React.useState((field === null || field === void 0 ? void 0 : field.rawValue) || ""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    initialValue = _useState4[0],
+    setInitialValue = _useState4[1];
   var _useContext = React.useContext(styled.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);
+      }
     }
   };
+  React.useEffect(function () {
+    if (initialValue) {
+      if (removeFromValue !== undefined) {
+        fieldActions.set(initialValue.replace(removeFromValue, ""));
+      } else {
+        fieldActions.set(initialValue);
+      }
+    }
+  }, [initialValue]);
   return /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -27105,11 +27120,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,
@@ -27132,7 +27151,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,
@@ -48589,6 +48608,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     isNum: true,
     autocompleteValue: "cc-number",
+    name: "cc-number",
     isRequired: true
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",