add support for paste event given allowedDecimalSeparators

README.md

@@ -64,7 +64,7 @@ In typescript you also have to enable `"esModuleInterop": true` in your tsconfig
 | isAllowed | ([values](#values-object)) => true or false | none | A checker function to check if input value is valid or not. If this function returns false, the onChange method will not get triggered |
 | renderText | (formattedValue, customProps) => React Element | null | A renderText method useful if you want to render formattedValue in different element other than span. It also returns the custom props that are added to the component which can allow passing down props to the rendered element |
 | getInputRef | (elm) => void | null | Method to get reference of input, span (based on displayType prop) or the customInput's reference. See [Getting reference](#getting-reference)
-| allowedDecimalSeparators | array of char | none | Characters which when pressed result in a decimal separator. When missing, decimal separator and '.' are used |
+| allowedDecimalSeparators | array of char | none | Characters which when pressed or pasted from the clipboard will result in a decimal separator. When missing, decimal separator and '.' are used |
 
 **Other than this it accepts all the props which can be given to a input or span based on displayType you selected.**
 

example/src/index.js

@@ -113,6 +113,16 @@ class App extends React.Component {
           />
         </div>
 
+        <div className="example">
+          <h3>Custom allowed decimal separators with decimal precision</h3>
+          <NumberFormat
+            value={11.11}
+            allowedDecimalSeparators={['.', ',']}
+            decimalSeparator='.'
+            decimalScale={2}
+          />
+        </div>
+
         <div className="example">
           <h3>Format with pattern : Format credit card in an input</h3>
           <NumberFormat format="#### #### #### ####" mask="_" />

src/number_format.js

@@ -671,6 +671,12 @@ class NumberFormat extends React.Component {
       );
     }
 
+    const decimalSeparatorRegex = new RegExp(allowedDecimalSeparators.map(escapeRegExp).join('|'), 'g');
+    /** Check for "paste event" with, replace any allowed decimal separator with desired decimal separator. Issue #349  */
+    if (!format && decimalScale !== 0 && value.match(decimalSeparatorRegex)) {
+      value = value.replace(decimalSeparatorRegex, decimalSeparator);
+    }
+
     const leftBound = !!format ? 0 : prefix.length;
     const rightBound = lastValue.length - (!!format ? 0 : suffix.length);
 

test/library/input_numeric_format.spec.js

@@ -603,6 +603,39 @@ describe('Test NumberFormat as input with numeric format options', () => {
     expect(wrapper.state().value).toEqual('23,4456 Sq. ft');
   });
 
+
+  it('should work with the configured decimal separators based on the allowedDecimalSeparators prop. Issue #349', () => {
+    const wrapper = shallow(
+      <NumberFormat
+        displayType="input"
+        thousandSeparator={' '}
+        prefix=""
+        allowedDecimalSeparators={['.', ',']}
+        decimalSeparator='.'
+        decimalScale={2}
+      />,
+    );
+    simulateKeyInput(wrapper.find('input'), '123,45');
+    expect(wrapper.state().value).toEqual('123.45');
+  });
+
+  it('should work with the configured decimal separators based on the allowedDecimalSeparators prop and should not replace prefix and suffix. Issue #349', () => {
+    const wrapper = shallow(
+        <NumberFormat
+            displayType="input"
+            thousandSeparator={' '}
+            prefix="prefix,"
+            suffix="suffix,"
+            allowedDecimalSeparators={['.', ',']}
+            decimalSeparator='.'
+            decimalScale={2}
+            value={987}
+        />,
+    );
+    simulateKeyInput(wrapper.find('input'), '123,45');
+    expect(wrapper.state().value).toEqual('prefix,987 123.45suffix,');
+  });
+
   it('should not break if suffix/prefix has negation sign. Issue #245', () => {
     const wrapper = shallow(<NumberFormat suffix="-" />);