diff --git a/README.md b/README.md
index 0c498cf6..08a796e5 100644
--- a/README.md
+++ b/README.md
@@ -205,6 +205,12 @@ online example: http://react-component.github.io/input-number/examples/
|
Specifies a regex pattern to be added to the input number element - useful for forcing iOS to open the number pad instead of the normal keyboard (supply a regex of "\d*" to do this) or form validation |
+
+ | inputClassName |
+ string |
+ |
+ Specifies the custom className for input element |
+
diff --git a/src/index.js b/src/index.js
index 8025f275..65bd805b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -69,6 +69,7 @@ export default class InputNumber extends React.Component {
precision: PropTypes.number,
required: PropTypes.bool,
pattern: PropTypes.string,
+ inputClassName: PropTypes.string,
}
static defaultProps = {
@@ -447,6 +448,9 @@ export default class InputNumber extends React.Component {
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-focused`]: this.state.focused,
});
+ const inputClasses = classNames(`${prefixCls}-input`, {
+ [props.inputClassName]: !!props.inputClassName,
+ });
let upDisabledClass = '';
let downDisabledClass = '';
const { value } = this.state;
@@ -564,7 +568,7 @@ export default class InputNumber extends React.Component {
type={props.type}
placeholder={props.placeholder}
onClick={props.onClick}
- className={`${prefixCls}-input`}
+ className={inputClasses}
tabIndex={props.tabIndex}
autoComplete="off"
onFocus={this.onFocus}
diff --git a/tests/index.js b/tests/index.js
index 17bdc5d5..83bdaf74 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -1123,6 +1123,18 @@ describe('inputNumber', () => {
expect(inputElement.value).to.be('$ 6 boeing 737');
});
});
+
+ describe('inputClassName prop', () => {
+ it(`should render with a custom className for input if it is supplied`, () => {
+ ReactDOM.render(
+ ,
+ container
+ );
+ expect(container
+ .querySelector('#pattern-input-test')
+ .className.indexOf('custom-class') > 0).to.be(true);
+ });
+ });
});
describe('Mobile inputNumber use TouchEvents', () => {