Fix for bug 691

example/src/index.js

@@ -21,6 +21,7 @@ class App extends React.Component {
     return (
       <div>
         <div className="example">
+          <NumericFormat prefix='100-'  suffix={"000 USD"} />
           <h3>Prefix and thousand separator : Format currency as text</h3>
           <NumericFormat value={2456981} displayType="text" thousandSeparator={true} prefix="$" />
         </div>

src/numeric_format.tsx

@@ -136,24 +136,56 @@ export function removeFormatting<BaseType = InputAttributes>(
     value = value.substring(0, start) + separator + value.substring(start + 1, value.length);
   }
 
-  let hasNegation = false;
+  const stripNegation = (value: string, start: number, end: number) => {
+    /**
+     * if prefix starts with - the number hast to have two - at the start
+     * if suffix starts with - and the value length is same as suffix length, then the - sign is from the suffix
+     * In other cases, if the value starts with - then it is a negation
+     */
+    let hasNegation = false;
+    let hasDoubleNegation = false;
+    if (prefix.startsWith('-')) hasNegation = !value.startsWith('--');
+    else if (value.startsWith('--')) {
+      hasNegation = false;
+      hasDoubleNegation = true;
+    } else if (suffix.startsWith('-') && value.length === suffix.length) hasNegation = false;
+    else if (value[0] === '-') hasNegation = true;
+
+    let charsToRemove = hasNegation ? 1 : 0;
+    if (hasDoubleNegation) charsToRemove = 2;
+
+    // remove negation/double negation from start to simplify prefix logic as negation comes before prefix
+    if (charsToRemove) {
+      value = value.substring(charsToRemove);
+
+      // account for the removal of the negation for start and end index
+      start -= charsToRemove;
+      end -= charsToRemove;
+    }
 
-  /**
-   * if prefix starts with - the number hast to have two - at the start
-   * if suffix starts with - and the value length is same as suffix length, then the - sign is from the suffix
-   * In other cases, if the value starts with - then it is a negation
-   */
-  if (prefix.startsWith('-')) hasNegation = value.startsWith('--');
-  else if (suffix.startsWith('-') && value.length === suffix.length) hasNegation = false;
-  else if (value[0] === '-') hasNegation = true;
+    return { value, start, end, hasNegation };
+  };
 
-  // remove negation from start to simplify prefix logic as negation comes before prefix
-  if (hasNegation) {
-    value = value.substring(1);
+  const toMetadata = stripNegation(value, start, end);
+  const { hasNegation } = toMetadata;
+  ({ value, start, end } = toMetadata);
 
-    // account for the removal of the negation for start and end index
-    start -= 1;
-    end -= 1;
+  const {
+    start: fromStart,
+    end: fromEnd,
+    value: lastValue,
+  } = stripNegation(changeMeta.lastValue, from.start, from.end);
+
+  // if only prefix and suffix part is updated reset the value to last value
+  // if the changed range is from suffix in the updated value, and the the suffix starts with the same characters, allow the change
+  const updatedSuffixPart = value.substring(start, end);
+  if (
+    value.length &&
+    lastValue.length &&
+    (fromStart > lastValue.length - suffix.length || fromEnd < prefix.length) &&
+    !(updatedSuffixPart && suffix.startsWith(updatedSuffixPart))
+  ) {
+    value = lastValue;
   }
 
   /**
@@ -167,7 +199,7 @@ export function removeFormatting<BaseType = InputAttributes>(
   else if (start < prefix.length) startIndex = start;
   value = value.substring(startIndex);
 
-  // account for deleted prefix for end index
+  // account for deleted prefix for end
   end -= startIndex;
 
   /**
@@ -180,6 +212,9 @@ export function removeFormatting<BaseType = InputAttributes>(
   const suffixStartIndex = value.length - suffix.length;
 
   if (value.endsWith(suffix)) endIndex = suffixStartIndex;
+  // if the suffix is removed from the end
+  else if (end > suffixStartIndex) endIndex = end;
+  // if the suffix is removed from start
   else if (end > value.length - suffix.length) endIndex = end;
 
   value = value.substring(0, endIndex);

test/library/input_numeric_format.spec.js

@@ -685,6 +685,36 @@ describe('Test NumberFormat as input with numeric format options', () => {
     expect(wrapper.find('input').prop('value')).toEqual('0.00000001');
   });
 
+  describe('should handle if only partial prefix or suffix is removed using double click select and the remove. #694', () => {
+    it('while changing suffix', () => {
+      const wrapper = mount(<NumericFormat prefix="100-" value={1} suffix="000 USD" />);
+
+      simulateKeyInput(wrapper.find('input'), '2', 9, 12);
+      expect(wrapper.find('input').prop('value')).toEqual('100-1000 USD');
+    });
+
+    it('while changing prefix', () => {
+      const wrapper = mount(<NumericFormat prefix="100-" value={1} suffix="000 USD" />);
+
+      simulateKeyInput(wrapper.find('input'), '2', 0, 2);
+      expect(wrapper.find('input').prop('value')).toEqual('100-1000 USD');
+    });
+
+    it('while deleting suffix', () => {
+      const wrapper = mount(<NumericFormat prefix="100-" value={1} suffix="000 USD" />);
+
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 9, 12);
+      expect(wrapper.find('input').prop('value')).toEqual('100-1000 USD');
+    });
+
+    fit('while deleting prefix', () => {
+      const wrapper = mount(<NumericFormat prefix="100-" value={1} suffix="000 USD" />);
+
+      simulateKeyInput(wrapper.find('input'), 'Backspace', 0, 3);
+      expect(wrapper.find('input').prop('value')).toEqual('100-1000 USD');
+    });
+  });
+
   describe('Test thousand group style', () => {
     it('should format on english style thousand grouping', () => {
       const wrapper = mount(<NumericFormat thousandSeparator={true} value={12345678} />);