From ae605a3a1319fadb929b90396511d60effcb3d51 Mon Sep 17 00:00:00 2001
From: joepuzzo <jgpuzzo2@gmail.com>
Date: Tue, 10 Jan 2023 12:33:20 -0800
Subject: [PATCH] added maskOnBlur so users can trigger mask function only on
 blur

---
 CHANGELOG.md                      |  6 ++++++
 src/FormController.js             | 21 +++++++++++++++++++--
 src/hooks/useField.js             |  2 ++
 stories/Formatting/Mask/README.md |  6 ++++++
 stories/Formatting/Mask/index.js  |  6 ++++++
 stories/Inputs/Intro/README.md    |  1 +
 6 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4de4e347..1654bc2b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 4.39.0 (January 10th, 2023)
+
+### Added
+
+- maskOnBlur so users can trigger mask function only on blur
+
 ## 4.38.2 (January 9th, 2023)
 
 ### Fixed
diff --git a/src/FormController.js b/src/FormController.js
index 822652be..2cf9bfb1 100644
--- a/src/FormController.js
+++ b/src/FormController.js
@@ -311,7 +311,7 @@ export class FormController {
       let maskedVal = value;
 
       // call mask if passed
-      if (meta.mask) {
+      if (meta.mask && !meta.maskOnBlur) {
         maskedVal = meta.mask(val);
       }
 
@@ -356,7 +356,7 @@ export class FormController {
       }
 
       // call mask if passed
-      if (meta.mask) {
+      if (meta.mask && !meta.maskOnBlur) {
         val = meta.mask(val);
         maskedVal = val;
       }
@@ -546,6 +546,23 @@ export class FormController {
     // Update the state
     ObjectMap.set(this.state.touched, name, value);
 
+    // Update value if maskOnBlur and we have mask
+    if (meta.mask && meta.maskOnBlur) {
+      let val = ObjectMap.get(this.state.values, name);
+      let maskedVal = val;
+      maskedVal = meta.mask(val);
+
+      // // Only parse if parser was passed
+      if (meta.parser) {
+        val = val != null ? informedParse(val, meta.parser) : val;
+      }
+
+      debug(`Setting ${name}'s value to`, maskedVal);
+      ObjectMap.set(this.state.values, name, maskedVal);
+      debug(`Setting ${name}'s maskedValue to`, maskedVal);
+      ObjectMap.set(this.state.maskedValues, name, maskedVal);
+    }
+
     // We only need to call validate if the user gave us one
     // and they want us to validate on blur
     // Example validateOn = "change" ("change-change")==> true
diff --git a/src/hooks/useField.js b/src/hooks/useField.js
index 984b386e..5f8af4c8 100644
--- a/src/hooks/useField.js
+++ b/src/hooks/useField.js
@@ -70,6 +70,7 @@ export const useField = ({
   gatherOnMount,
   validateOnMount: userValidateOnMount,
   validateOn: userValidateOn,
+  maskOnBlur,
   validateWhen = [],
   formatterDependencies = [],
   formController: userFormController,
@@ -210,6 +211,7 @@ export const useField = ({
     showErrorIfError,
     showErrorIfTouched,
     showErrorIfDirty,
+    maskOnBlur,
     asyncValidate,
     gatherData,
     initialize,
diff --git a/stories/Formatting/Mask/README.md b/stories/Formatting/Mask/README.md
index 3cc4fe02..0e0d6b98 100644
--- a/stories/Formatting/Mask/README.md
+++ b/stories/Formatting/Mask/README.md
@@ -18,6 +18,12 @@ const parser = value => value.toLowerCase();
     mask={mask}
     parser={parser}
   />
+  <Input
+    name="field3"
+    label="Field 3 ( masks on blur )"
+    mask={mask}
+    maskOnBlur
+  />
   <button type="submit">Submit</button>
 </Form>;
 ```
diff --git a/stories/Formatting/Mask/index.js b/stories/Formatting/Mask/index.js
index 9eebd8e9..8b930220 100644
--- a/stories/Formatting/Mask/index.js
+++ b/stories/Formatting/Mask/index.js
@@ -22,6 +22,12 @@ const Mask = () => (
       mask={mask}
       parser={parser}
     />
+    <Input
+      name="field3"
+      label="Field 3 ( masks on blur )"
+      mask={mask}
+      maskOnBlur
+    />
     <button type="submit">Submit</button>
     <Debug values maskedValues />
   </Form>
diff --git a/stories/Inputs/Intro/README.md b/stories/Inputs/Intro/README.md
index e8591842..cc20b849 100644
--- a/stories/Inputs/Intro/README.md
+++ b/stories/Inputs/Intro/README.md
@@ -14,6 +14,7 @@ Below are all the input props that `informed`'s inputs accept.
 | validate            | func   | NO       | Function that gets called when form performs validation. Function accepts the value as a parameter and must return either an error or undefined. By default it only gets called onSubmit. See Validation section for additional details. |
 | validateOn          | bool   | NO       | Tells field when to perform validation. By default it only validates onBlur.                                                                                                                                                             |
 | validateOnMount     | bool   | NO       | Tells field to perform validation onMount.                                                                                                                                                                                               |  |
+| maskOnBlur          | bool   | NO       | Tells field to perform masking on blur instead of on change.                                                                                                                                                                             |  |
 | keep                | object | NO       | Keeps specified field state around even when the input itself is unmounted keep={{ value: true }}                                                                                                                                        |
 | keepState           | bool   | NO       | Keeps the field state around even when the input itself is unmounted ( see dynamic form docs for example )                                                                                                                               |
 | keepStateIfRelevant | bool   | NO       | Keeps the field state around even when the input itself is not mounted ( only if its also relevant )                                                                                                                                     |