Fix issue for bug #452. Be able to delete / hit backspace on highligh…

src/number_format.js

@@ -604,13 +604,6 @@ class NumberFormat extends React.Component {
     return false;
   }
 
-  checkIfFormatGotDeleted(start: number, end: number, value: string) {
-    for (let i = start; i < end; i++) {
-      if (this.isCharacterAFormat(i, value)) return true;
-    }
-    return false;
-  }
-
   /**
    * This will check if any formatting got removed by the delete or backspace and reset the value
    * It will also work as fallback if android chome keyDown handler does not work
@@ -644,11 +637,38 @@ class NumberFormat extends React.Component {
       return value;
     }
 
-    //if format got deleted reset the value to last value
-    if (this.checkIfFormatGotDeleted(start, end, lastValue)) {
-      value = lastValue;
+    // check whether the deleted portion has a non numeric field
+    // this means that it may be a format pattern symbol or a separator
+    const deletedValues = lastValue.substr(start, end - start);
+    const hasNonNumeric = !![...deletedValues].find((deletedVal, idx) => this.isCharacterAFormat(idx + start, lastValue));
+
+    // if it has, only remove the numeric portion
+    if(hasNonNumeric) {
+      const deletedValuePortion = lastValue.substr(start)
+      const recordIndexOfFormatCharacters = {};
+      const resolvedPortion = [];
+      [...deletedValuePortion].forEach((currentPortion, idx) => {
+        if(this.isCharacterAFormat(idx + start, lastValue)){
+          recordIndexOfFormatCharacters[idx] = currentPortion;
+        } else if (idx > deletedValues.length - 1) {
+          resolvedPortion.push(currentPortion);
+        }
+      })
+
+      Object.keys(recordIndexOfFormatCharacters).forEach(idx => {
+        if(resolvedPortion.length > idx){
+          resolvedPortion.splice(idx, 0, recordIndexOfFormatCharacters[idx]);
+        } else {
+          resolvedPortion.push(recordIndexOfFormatCharacters[idx])
+        }
+      })
+
+      value = lastValue.substr(0, start) + resolvedPortion.join('');
     }
 
+
+
+
     //for numbers check if beforeDecimal got deleted and there is nothing after decimal,
     //clear all numbers in such case while keeping the - sign
     if (!format) {

test/library/input.spec.js

@@ -204,22 +204,23 @@ describe('NumberFormat as input', () => {
     simulateKeyInput(wrapper.find('input'), 'Backspace', 0, 4);
     expect(wrapper.state().value).toEqual('+1 (123) 456 7 89 US');
 
-    //when format and number character are delted
-    wrapper.setProps({value: '+1 (999) 999 9 99 US'})
-    simulateKeyInput(wrapper.find('input'), 'Backspace', 6, 10);
-    expect(wrapper.state().value).toEqual('+1 (999) 999 9 99 US');
-
-    //when group of characters (including format character) is replaced with number
-    wrapper.setProps({value: '+1 (888) 888 8 88 US'});
-    simulateKeyInput(wrapper.find('input'), '8', 6, 10);
-    expect(wrapper.state().value).toEqual('+1 (888) 888 8 88 US');
-
     //when a format character is replaced with number
     wrapper.setProps({value: '+1 (777) 777 7 77 US'});
     simulateKeyInput(wrapper.find('input'), '8', 8, 9);
     expect(wrapper.state().value).toEqual('+1 (777) 777 7 77 US');
   });
 
+  it('should update value if group of characters got deleted with format', () => {
+    const wrapper = shallow(<NumberFormat format="+1 (###) ### # ## US" value="+1 (999) 999 9 99 US"/>);
+    simulateKeyInput(wrapper.find('input'), 'Backspace', 6, 10);
+    expect(wrapper.state().value).toEqual('+1 (999) 999 9    US');
+
+    //when group of characters (including format character) is replaced with number
+    wrapper.setProps({value: '+1 (888) 888 8 88 US'});
+    simulateKeyInput(wrapper.find('input'), '8', 6, 10);
+    expect(wrapper.state().value).toEqual('+1 (888) 888 8 8  US');
+  })
+
   it('should allow replacing all characters with number when formatting is present', () => {
     const format = '+1 (###) ### # ## US';
     const wrapper = shallow(<NumberFormat format={format} value="+1 (123) 456 7 89 US" mask="_"/>);