Fixed #1441 and #1136 - Improve decimal separator behavior on InputNu…

…mber
primefaces · Aug 25, 2021 · 26eba9e · 26eba9e
1 parent d924dba
commit 26eba9e
Showing 1 changed file with 52 additions and 7 deletions.
diff --git a/src/components/inputnumber/InputNumber.vue b/src/components/inputnumber/InputNumber.vue
@@ -430,16 +430,25 @@ export default {
                         this._decimal.lastIndex = 0;
 
                         if (this.isNumeralChar(deleteChar)) {
+                            const decimalLength = this.getDecimalLength(inputValue);
+
                             if (this._group.test(deleteChar)) {
                                 this._group.lastIndex = 0;
                                 newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
                             }
                             else if (this._decimal.test(deleteChar)) {
                                 this._decimal.lastIndex = 0;
-                                this.$refs.input.$el.setSelectionRange(selectionStart - 1, selectionStart - 1);
+
+                                if (decimalLength) {
+                                    this.$refs.input.$el.setSelectionRange(selectionStart - 1, selectionStart - 1);
+                                }
+                                else {
+                                    newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+                                }
                             }
                             else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                                newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
+                                const insertedText = (this.minFractionDigits || 0) < decimalLength ? '' : '0';
+                                newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
                             }
                             else if (decimalCharIndex > 0 && decimalCharIndex === 1) {
                                 newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
@@ -470,16 +479,25 @@ export default {
                         this._decimal.lastIndex = 0;
 
                         if (this.isNumeralChar(deleteChar)) {
+                            const decimalLength = this.getDecimalLength(inputValue);
+
                             if (this._group.test(deleteChar)) {
                                 this._group.lastIndex = 0;
                                 newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
                             }
                             else if (this._decimal.test(deleteChar)) {
                                 this._decimal.lastIndex = 0;
-                                this.$refs.input.$el.setSelectionRange(selectionStart + 1, selectionStart + 1);
+
+                                if (decimalLength) {
+                                    this.$refs.input.$el.setSelectionRange(selectionStart + 1, selectionStart + 1);
+                                }
+                                else {
+                                    newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+                                }
                             }
                             else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                                newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
+                                const insertedText = (this.minFractionDigits || 0) < decimalLength ? '' : '0';
+                                newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
                             }
                             else if (decimalCharIndex > 0 && decimalCharIndex === 1) {
                                 newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
@@ -576,6 +594,10 @@ export default {
                     newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
                     this.updateValue(event, newValueStr, text, 'insert');
                 }
+                else if (decimalCharIndex === -1 && this.maxFractionDigits) {
+                    newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
+                    this.updateValue(event, newValueStr, text, 'insert');
+                }
             }
             else {
                 const maxFractionDigits = this.numberFormat.resolvedOptions().maximumFractionDigits;
@@ -594,7 +616,7 @@ export default {
             }
         },
         insertText(value, text, start, end) {
-            let textSplit = text.split('.');
+            let textSplit = text === '.' ? text : text.split('.');
 
             if (textSplit.length === 2) {
                 const decimalCharIndex = value.slice(start, end).search(this._decimal);
@@ -696,7 +718,7 @@ export default {
 
             if (valueStr != null) {
                 newValue = this.parseValue(valueStr);
-                this.updateInput(newValue, insertedValueStr, operation);
+                this.updateInput(newValue, insertedValueStr, operation, valueStr);
 
                 this.handleOnInput(event, currentValue, newValue);
             }
@@ -733,13 +755,17 @@ export default {
 
             return value;
         },
-        updateInput(value, insertedValueStr, operation) {
+        updateInput(value, insertedValueStr, operation, valueStr) {
             insertedValueStr = insertedValueStr || '';
 
             let inputValue = this.$refs.input.$el.value;
             let newValue = this.formatValue(value);
             let currentLength = inputValue.length;
 
+            if (newValue !== valueStr) {
+                newValue = this.concatValues(newValue, valueStr);
+            }
+
             if (currentLength === 0) {
                 this.$refs.input.$el.value = newValue;
                 this.$refs.input.$el.setSelectionRange(0, 0);
@@ -800,6 +826,25 @@ export default {
 
             this.$refs.input.$el.setAttribute('aria-valuenow', value);
         },
+        concatValues(val1, val2) {
+            if (val1 !== null && val2 !== null) {
+                let decimalCharIndex = val2.search(this._decimal);
+                this._decimal.lastIndex = 0;
+
+                return val1.split(this._decimal)[0] + (decimalCharIndex !== -1 ? val2.slice(decimalCharIndex) : '');
+            }
+
+            return val1;
+        },
+        getDecimalLength(value) {
+            if (value) {
+                const valueSplit = value.split(this._decimal);
+
+                return valueSplit.length === 2 ? valueSplit[1].length : 0;
+            }
+
+            return 0;
+        },
         updateModel(event, value) {
             this.$emit('update:modelValue', value);
         },