Add inputClassName prop

README.md

@@ -205,6 +205,12 @@ online example: http://react-component.github.io/input-number/examples/
           <td></td>
           <td>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</td>
         </tr>
+        <tr>
+          <td>inputClassName</td>
+          <td>string</td>
+          <td></td>
+          <td>Specifies the custom className for input element</td>
+        </tr>
     </tbody>
 </table>
 

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}

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(
+        <InputNumber id="pattern-input-test" inputClassName="custom-class" />,
+        container
+      );
+      expect(container
+        .querySelector('#pattern-input-test')
+        .className.indexOf('custom-class') > 0).to.be(true);
+    });
+  });
 });
 
 describe('Mobile inputNumber use TouchEvents', () => {