diff --git a/README.md b/README.md index df5deab1..d020ddbc 100755 --- a/README.md +++ b/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.** diff --git a/example/src/index.js b/example/src/index.js index a65b070c..e86e1eec 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -113,6 +113,16 @@ class App extends React.Component { /> +
+

Custom allowed decimal separators with decimal precision

+ +
+

Format with pattern : Format credit card in an input

diff --git a/src/number_format.js b/src/number_format.js index cd4a38e7..5d5a151f 100644 --- a/src/number_format.js +++ b/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); diff --git a/test/library/input_numeric_format.spec.js b/test/library/input_numeric_format.spec.js index 3dc13eea..d507eb90 100644 --- a/test/library/input_numeric_format.spec.js +++ b/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( + , + ); + 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( + , + ); + 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();