Call beforeMaskedValueChange in constructor

Author: sanniassin

.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "dist/react-input-mask.js": {
-    "bundled": 38237,
-    "minified": 13886,
-    "gzipped": 4872
+    "bundled": 38943,
+    "minified": 14064,
+    "gzipped": 4921
   },
   "lib/react-input-mask.development.js": {
-    "bundled": 33041,
-    "minified": 14566,
-    "gzipped": 4628
+    "bundled": 33715,
+    "minified": 14861,
+    "gzipped": 4668
   }
 }

README.md

@@ -57,8 +57,8 @@ The following props are considered experimental because they are more prone to i
 
 ### `beforeMaskedValueChange` : `function`
 In case you need to implement more complex masking behavior, you can provide `beforeMaskedValueChange` function to change masked value and cursor position before it will be applied to the input. `beforeMaskedValueChange` receives following arguments:
-1. **newState** (object): New input state. Contains `value` and `selection` fields. `selection` is null on input blur.  Example: `{ value: '12/1_/____', selection: { start: 4, end: 4 } }`
-2. **oldState** (object): Input state before change. Contains `value` and `selection` fields. `selection` is null on input focus.
+1. **newState** (object): New input state. Contains `value` and `selection` fields. `selection` is null on input blur or when function is called before input mount. Example: `{ value: '12/1_/____', selection: { start: 4, end: 4 } }`
+2. **oldState** (object): Input state before change. Contains `value` and `selection` fields. `selection` is null on input focus or when function is called before input mount.
 3. **userInput** (string): Raw entered or pasted string. `null` if user didn't enter anything (e.g. triggered by deletion or rerender due to props change).
 4. **maskOptions** (object): Mask options. Example:
 ```js

src/index.js

@@ -28,7 +28,7 @@ class InputElement extends React.Component {
   constructor(props) {
     super(props);
 
-    const { mask, maskChar, formatChars, alwaysShowMask } = props;
+    const { mask, maskChar, formatChars, alwaysShowMask, beforeMaskedValueChange } = props;
     let { defaultValue, value } = props;
 
     this.maskOptions = parseMask(mask, maskChar, formatChars);
@@ -40,13 +40,30 @@ class InputElement extends React.Component {
       value = defaultValue;
     }
 
-    value = getStringValue(value);
+    let newValue = getStringValue(value);
 
-    if (this.maskOptions.mask && (alwaysShowMask || value)) {
-      value = formatValue(this.maskOptions, value);
+    if (this.maskOptions.mask && (alwaysShowMask || newValue)) {
+      newValue = formatValue(this.maskOptions, newValue);
+
+      if (isFunction(beforeMaskedValueChange)) {
+        let oldValue = props.value;
+        if (props.value == null) {
+          oldValue = defaultValue;
+        }
+        oldValue = getStringValue(oldValue);
+
+        const modifiedValue = beforeMaskedValueChange(
+          { value: newValue, selection: null },
+          { value: oldValue, selection: null },
+          null,
+          this.getModifyMaskedValueConfig()
+        );
+
+        newValue = modifiedValue.value;
+      }
     }
 
-    this.value = value;
+    this.value = newValue;
   }
 
   componentDidMount() {

tests/input/input.js

@@ -882,44 +882,52 @@ describe('react-input-mask', () => {
       })();
   });
 
-  it('should allow to modify value with beforeMaskedValueChange', createInput(
-    <Input mask="99999-9999" maskChar={null} value="" />, (input, inputNode) => {
-      setInputProps(input, {
-        onChange: (event) => {
-          setInputProps(input, {
-            value: event.target.value
-          });
-        },
-        beforeMaskedValueChange: (newState, oldState, userInput) => {
-          let { value } = newState;
-          let selection = newState.selection;
-          let cursorPosition = selection ? selection.start : null;
-          if (value.endsWith('-') && userInput !== '-' && !input.props.value.endsWith('-')) {
-            if (cursorPosition === value.length) {
-              cursorPosition--;
-              selection = { start: cursorPosition, end: cursorPosition };
-            }
-            value = value.slice(0, -1);
-          }
-
-          return {
-            value,
-            selection
-          };
+  it('should allow to modify value with beforeMaskedValueChange', (() => {
+    const beforeMaskedValueChange = (newState, oldState, userInput, options, inputInstance) => {
+      let { value } = newState;
+      let selection = newState.selection;
+      let cursorPosition = selection ? selection.start : null;
+      if (value.endsWith('-') && userInput !== '-' && (!inputInstance || !inputInstance.props.value.endsWith('-'))) {
+        if (cursorPosition === value.length) {
+          cursorPosition--;
+          selection = { start: cursorPosition, end: cursorPosition };
         }
-      });
+        value = value.slice(0, -1);
+      }
 
-      inputNode.focus();
-      TestUtils.Simulate.focus(inputNode);
+      return {
+        value,
+        selection
+      };
+    };
 
-      setInputProps(input, { value: '12345' });
-      expect(inputNode.value).to.equal('12345');
+    return createInput(
+      <Input mask="99999-9999" maskChar={null} value="12345" beforeMaskedValueChange={beforeMaskedValueChange} />, (input, inputNode) => {
+        expect(inputNode.value).to.equal('12345');
 
-      input.setCursorPosition(5);
+        setInputProps(input, {
+          onChange: (event) => {
+            setInputProps(input, {
+              value: event.target.value
+            });
+          },
+          beforeMaskedValueChange: (newState, oldState, userInput, options) => {
+            return beforeMaskedValueChange(newState, oldState, userInput, options, input);
+          }
+        });
 
-      simulateInputKeyPress(input, '-');
-      expect(inputNode.value).to.equal('12345-');
-    }));
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
+        setInputProps(input, { value: '12345' });
+        expect(inputNode.value).to.equal('12345');
+
+        input.setCursorPosition(5);
+
+        simulateInputKeyPress(input, '-');
+        expect(inputNode.value).to.equal('12345-');
+      });
+  })());
 
   it('shouldn\'t modify value on entering non-allowed character', createInput(
     <Input mask="9999" defaultValue="1234" />, (input, inputNode) => {