Skip to content

Commit

Permalink
Allow input type override
Browse files Browse the repository at this point in the history
In modern mobile web it is recommended to set input type to  or  for numeric input fields

mobileinputtypes.com
  • Loading branch information
sevos committed Nov 24, 2016
1 parent 68c4947 commit a541abc
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 5 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,5 +100,6 @@ All other attributes are applied to the input element. For example, you can int
| precision | 2 | Number of digits after the decimal separator |
| decimalSeparator | '.' | The decimal separator |
| thousandSeparator | ',' | The thousand separator |
| inputType | "text" | Input field tag type. You may want to use `number` or `tel` |
10 changes: 7 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ const CurrencyInput = React.createClass({
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
decimalSeparator: PropTypes.string,
thousandSeparator: PropTypes.string,
precision: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
precision: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
inputType: PropTypes.string
},


Expand All @@ -36,7 +37,8 @@ const CurrencyInput = React.createClass({
value: "0",
decimalSeparator: ".",
thousandSeparator: ",",
precision: "2"
precision: "2",
inputType: "text"
}
},

Expand All @@ -55,6 +57,7 @@ const CurrencyInput = React.createClass({
delete customProps.decimalSeparator;
delete customProps.thousandSeparator;
delete customProps.precision;
delete customProps.inputType;
return {
maskedValue: mask(this.props.value, this.props.precision, this.props.decimalSeparator, this.props.thousandSeparator),
customProps: customProps
Expand All @@ -76,6 +79,7 @@ const CurrencyInput = React.createClass({
delete customProps.decimalSeparator;
delete customProps.thousandSeparator;
delete customProps.precision;
delete customProps.inputType;
this.setState({
maskedValue: mask(nextProps.value, nextProps.precision, nextProps.decimalSeparator, nextProps.thousandSeparator),
customProps: customProps
Expand Down Expand Up @@ -112,7 +116,7 @@ const CurrencyInput = React.createClass({
render() {
return (
<input
type="text"
type={this.props.inputType}
value={this.state.maskedValue}
onChange={this.handleChange}
{...this.state.customProps}
Expand Down
6 changes: 4 additions & 2 deletions test/index.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,11 @@ describe('react-currency-input', function(){

});


describe('custom arguments', function(){

before('render and locate element', function() {
this.renderedComponent = ReactTestUtils.renderIntoDocument(
<CurrencyInput decimalSeparator="," thousandSeparator="." precision="3" value="123456789"/>
<CurrencyInput decimalSeparator="," thousandSeparator="." precision="3" value="123456789" inputType="tel" />
);

this.inputComponent = ReactTestUtils.findRenderedDOMComponentWithTag(
Expand All @@ -57,6 +56,9 @@ describe('react-currency-input', function(){
expect(this.renderedComponent.getMaskedValue()).to.equal('123.456,789')
});

it('<input> should be of type "tel"', function() {
expect(this.inputComponent.getAttribute('type')).to.equal('tel')
});
});


Expand Down

0 comments on commit a541abc

Please sign in to comment.