react-input-mask - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5

build/InputElement.js

@@ -350,6 +350,7 @@ // https://github.com/sanniassin/react-input-mask
     getInitialState: function () {
+        this.hasValue = this.props.value != null;
         this.charsRules = "formatChars" in this.props ? this.props.formatChars : this.defaultCharsRules;
 
         var mask = this.parseMask(this.props.mask);
-        var defaultValue = this.props.defaultValue != null ? this.props.defaultValue : null;
+        var defaultValue = this.props.defaultValue != null ? this.props.defaultValue : '';
         var value = this.props.value != null ? this.props.value : defaultValue;
@@ -378,2 +379,3 @@
     componentWillReceiveProps: function (nextProps) {
+        this.hasValue = this.props.value != null;
         this.charsRules = "formatChars" in nextProps ? nextProps.formatChars : this.defaultCharsRules;
@@ -388,6 +390,6 @@
 
-        var newValue = nextProps.value !== undefined ? this.getStringValue(nextProps.value) : this.state.value;
+        var newValue = nextProps.value != null ? this.getStringValue(nextProps.value) : this.state.value;
 
         var showEmpty = nextProps.alwaysShowMask || this.isFocused();
-        if (isMaskChanged || mask.mask && (newValue || showEmpty)) {
+        if (isMaskChanged || mask.mask && (newValue || showEmpty && !this.hasValue)) {
             newValue = this.formatValue(newValue);
@@ -403,3 +405,3 @@
         }
-        if (mask.mask && this.isEmpty(newValue) && !showEmpty) {
+        if (mask.mask && this.isEmpty(newValue) && !showEmpty && !this.hasValue) {
             newValue = "";
@@ -454,3 +456,3 @@ }
             this.setState({
-                value: value
+                value: this.hasValue ? this.state.value : value
             });
@@ -505,3 +507,3 @@ preventDefault = true;
             this.setState({
-                value: value
+                value: this.hasValue ? this.state.value : value
             });
@@ -590,10 +592,9 @@ if (typeof this.props.onChange === "function") {
         this.setState({
-            value: value
+            value: this.hasValue ? this.state.value : value
         });
 
-        this.setCaretPos(caretPos);
-
         if (typeof this.props.onChange === "function") {
             this.props.onChange(event);
         }
+        this.setCaretPos(caretPos);
     },
@@ -605,4 +606,5 @@ onFocus: function (event) {
             event.target.value = this.formatValue(value);
+
             this.setState({
-                value: value
+                value: this.hasValue ? this.state.value : value
             }, this.setCaretToEnd);
@@ -625,3 +627,3 @@
             this.setState({
-                value: ""
+                value: this.hasValue ? this.state.value : ""
             });
@@ -671,3 +673,3 @@ if (typeof this.props.onChange === "function") {
             this.setState({
-                value: value
+                value: this.hasValue ? this.state.value : value
             });
@@ -674,0 +676,0 @@ if (event && typeof this.props.onChange === "function") {

InputElement.js

@@ -338,2 +338,3 @@ // https://github.com/sanniassin/react-input-mask
     getInitialState: function() {
+        this.hasValue = this.props.value != null;
         this.charsRules = "formatChars" in this.props ? this.props.formatChars : this.defaultCharsRules;
@@ -344,3 +345,3 @@
             ? this.props.defaultValue
-            : null;
+            : '';
         var value = this.props.value != null
@@ -370,2 +371,3 @@ ? this.props.value
     componentWillReceiveProps: function(nextProps) {
+        this.hasValue = this.props.value != null;
         this.charsRules = "formatChars" in nextProps ? nextProps.formatChars : this.defaultCharsRules;
@@ -380,3 +382,3 @@
 
-        var newValue = nextProps.value !== undefined
+        var newValue = nextProps.value != null
             ? this.getStringValue(nextProps.value)
@@ -386,3 +388,3 @@ : this.state.value;
         var showEmpty = nextProps.alwaysShowMask || this.isFocused();
-        if (isMaskChanged || (mask.mask && (newValue || showEmpty))) {
+        if (isMaskChanged || (mask.mask && (newValue || (showEmpty && !this.hasValue)))) {
             newValue = this.formatValue(newValue);
@@ -398,3 +400,3 @@
         }
-        if (mask.mask && this.isEmpty(newValue) && !showEmpty) {
+        if (mask.mask && this.isEmpty(newValue) && !showEmpty && !this.hasValue) {
             newValue = "";
@@ -451,3 +453,3 @@ }
             this.setState({
-                value: value
+                value: this.hasValue ? this.state.value : value
             });
@@ -501,3 +503,3 @@ preventDefault = true;
             this.setState({
-                value: value
+                value: this.hasValue ? this.state.value : value
             });
@@ -587,10 +589,9 @@ if (typeof this.props.onChange === "function") {
         this.setState({
-            value: value
+            value: this.hasValue ? this.state.value : value
         });
 
-        this.setCaretPos(caretPos);
-
         if (typeof this.props.onChange === "function") {
             this.props.onChange(event);
         }
+        this.setCaretPos(caretPos);
     },
@@ -602,4 +603,5 @@ onFocus: function(event) {
             event.target.value = this.formatValue(value);
+
             this.setState({
-                value: value
+                value: this.hasValue ? this.state.value : value
             }, this.setCaretToEnd);
@@ -623,3 +625,3 @@
             this.setState({
-                value: ""
+                value: this.hasValue ? this.state.value : ""
             });
@@ -669,3 +671,3 @@ if (typeof this.props.onChange === "function") {
             this.setState({
-                value: value
+                value: this.hasValue ? this.state.value : value
             });
@@ -672,0 +674,0 @@ if (event && typeof this.props.onChange === "function") {

package.json

 {
   "name": "react-input-mask",
   "description": "Masked input component for React",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "homepage": "https://github.com/sanniassin/react-input-mask",
@@ -6,0 +6,0 @@ "license": "MIT",

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71625

0.96%

Lines of code

1760

0.23%

No dependency changes