[ISSUE-283] Fix firefox default glow issue

nosir · Jan 13, 2018 · 0f13b22 · 0f13b22
1 parent f181d39
commit 0f13b22
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 20 deletions.
diff --git a/bower.json b/bower.json
@@ -8,7 +8,7 @@
     "form",
     "input"
   ],
-  "version": "1.0.9",
+  "version": "1.0.10",
   "author": {
     "name": "Max Huang",
     "email": "[email protected]",

diff --git a/dist/cleave-angular.js b/dist/cleave-angular.js
@@ -59,7 +59,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	/**
 	 * Construct a new Cleave instance by passing the configuration object
 	 *
-	 * @param {String / HTMLElement} element
+	 * @param {String | HTMLElement} element
 	 * @param {Object} opts
 	 */
 	var Cleave = function (element, opts) {
@@ -113,7 +113,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        owner.initDateFormatter();
 	        owner.initNumeralFormatter();
 
-	        owner.onInput(pps.initValue);
+	        // avoid touch input field if value is null
+	        // otherwise Firefox will add red box-shadow for <input required />
+	        if (pps.initValue || (pps.prefix && !pps.noImmediatePrefix)) {
+	            owner.onInput(pps.initValue);
+	        }
 	    },
 
 	    initNumeralFormatter: function () {
@@ -352,6 +356,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    updateValueState: function () {
 	        var owner = this;
+
+	        if (!owner.element) {
+	            return;
+	        }
+
 	        var endPos = owner.element.selectionEnd;
 	        var oldValue = owner.element.value;
 

diff --git a/dist/cleave-angular.min.js b/dist/cleave-angular.min.js
diff --git a/dist/cleave-react-node.js b/dist/cleave-react-node.js
@@ -161,7 +161,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        owner.initDateFormatter();
 	        owner.initNumeralFormatter();
 
-	        owner.onInput(pps.initValue);
+	        // avoid touch input field if value is null
+	        // otherwise Firefox will add red box-shadow for <input required />
+	        if (pps.initValue || pps.prefix && !pps.noImmediatePrefix) {
+	            owner.onInput(pps.initValue);
+	        }
 
 	        owner.registeredEvents.onInit(owner);
 	    },
@@ -435,6 +439,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    updateValueState: function updateValueState() {
 	        var owner = this;
+
+	        if (!owner.element) {
+	            owner.setState({ value: owner.properties.result });
+	        }
+
 	        var endPos = owner.element.selectionEnd;
 	        var oldValue = owner.element.value;
 	        var newValue = owner.properties.result;

diff --git a/dist/cleave-react-node.min.js b/dist/cleave-react-node.min.js
diff --git a/dist/cleave-react.js b/dist/cleave-react.js
@@ -161,7 +161,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        owner.initDateFormatter();
 	        owner.initNumeralFormatter();
 
-	        owner.onInput(pps.initValue);
+	        // avoid touch input field if value is null
+	        // otherwise Firefox will add red box-shadow for <input required />
+	        if (pps.initValue || pps.prefix && !pps.noImmediatePrefix) {
+	            owner.onInput(pps.initValue);
+	        }
 
 	        owner.registeredEvents.onInit(owner);
 	    },
@@ -435,6 +439,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    updateValueState: function updateValueState() {
 	        var owner = this;
+
+	        if (!owner.element) {
+	            owner.setState({ value: owner.properties.result });
+	        }
+
 	        var endPos = owner.element.selectionEnd;
 	        var oldValue = owner.element.value;
 	        var newValue = owner.properties.result;

diff --git a/dist/cleave-react.min.js b/dist/cleave-react.min.js
diff --git a/dist/cleave.js b/dist/cleave.js
@@ -59,7 +59,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	/**
 	 * Construct a new Cleave instance by passing the configuration object
 	 *
-	 * @param {String / HTMLElement} element
+	 * @param {String | HTMLElement} element
 	 * @param {Object} opts
 	 */
 	var Cleave = function (element, opts) {
@@ -113,7 +113,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        owner.initDateFormatter();
 	        owner.initNumeralFormatter();
 
-	        owner.onInput(pps.initValue);
+	        // avoid touch input field if value is null
+	        // otherwise Firefox will add red box-shadow for <input required />
+	        if (pps.initValue || (pps.prefix && !pps.noImmediatePrefix)) {
+	            owner.onInput(pps.initValue);
+	        }
 	    },
 
 	    initNumeralFormatter: function () {
@@ -352,6 +356,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    updateValueState: function () {
 	        var owner = this;
+
+	        if (!owner.element) {
+	            return;
+	        }
+
 	        var endPos = owner.element.selectionEnd;
 	        var oldValue = owner.element.value;
 

diff --git a/dist/cleave.min.js b/dist/cleave.min.js
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "form",
     "input"
   ],
-  "version": "1.0.9",
+  "version": "1.0.10",
   "author": {
     "name": "Max Huang",
     "url": "http://github.com/nosir",