added maskOnBlur so users can trigger mask function only on blur

daniel3830 · Jan 10, 2023 · ae605a3 · ae605a3
1 parent f73f7e2
commit ae605a3
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 )                                                                                                                                     |