Merge pull request #520 from dhis2/fix/add-min-max-step-attr-for-inputs

feat(input): add min/max/step attr for inputs (LIBS-133)

Author: KaiVandivier

packages/core/src/Input/Input.js

@@ -129,6 +129,9 @@ export class Input extends Component {
             loading,
             value,
             tabIndex,
+            max,
+            min,
+            step,
             dataTest,
         } = this.props
 
@@ -141,6 +144,9 @@ export class Input extends Component {
                     ref={this.inputRef}
                     type={type}
                     value={value}
+                    max={max}
+                    min={min}
+                    step={step}
                     disabled={disabled}
                     readOnly={readOnly}
                     tabIndex={tabIndex}
@@ -196,6 +202,10 @@ Input.defaultProps = {
  * @prop {string} [value]
  * @prop {string} [tabIndex]
  *
+ * @prop {string} [max] The native `max` attribute
+ * @prop {string} [min] The native `min` attribute
+ * @prop {string} [step] The native `step` attribute
+ *
  * @prop {boolean} [disabled]
  * @prop {boolean} [readOnly]
  * @prop {boolean} [dense] - Compact mode
@@ -216,9 +226,15 @@ Input.propTypes = {
     error: sharedPropTypes.statusPropType,
     initialFocus: propTypes.bool,
     loading: propTypes.bool,
+    /** The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmax), for use when `type` is `'number'` */
+    max: propTypes.string,
+    /** The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmin), for use when `type` is `'number'` */
+    min: propTypes.string,
     name: propTypes.string,
     placeholder: propTypes.string,
     readOnly: propTypes.bool,
+    /** The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefstep), for use when `type` is `'number'` */
+    step: propTypes.string,
     tabIndex: propTypes.string,
     type: propTypes.oneOf([
         'text',

packages/core/src/Input/__tests__/Input.test.js

@@ -0,0 +1,13 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { Input } from '../Input.js'
+
+describe('<Input>', () => {
+    it('passes min, max, and step props as attributes to the native <input> element', () => {
+        const testProps = { min: '0', max: '10', step: '0.5' }
+        const wrapper = shallow(<Input type="number" {...testProps} />)
+
+        const inputEl = wrapper.find('input')
+        expect(inputEl.props()).toMatchObject(testProps)
+    })
+})

packages/widgets/src/InputField/InputField.js

@@ -1,6 +1,7 @@
 import propTypes from '@dhis2/prop-types'
 import { sharedPropTypes } from '@dhis2/ui-constants'
 import { Field, Input, Box } from '@dhis2/ui-core'
+import PropTypes from 'prop-types'
 import React from 'react'
 
 /**
@@ -29,6 +30,9 @@ class InputField extends React.Component {
             readOnly,
             placeholder,
             name,
+            max,
+            min,
+            step,
             valid,
             error,
             warning,
@@ -65,6 +69,9 @@ class InputField extends React.Component {
                         value={value || ''}
                         placeholder={placeholder}
                         disabled={disabled}
+                        max={max}
+                        min={min}
+                        step={step}
                         valid={valid}
                         warning={warning}
                         error={error}
@@ -100,6 +107,10 @@ InputField.defaultProps = {
  * @prop {string} [tabIndex]
  * @prop {string} [inputWidth]
  *
+ * @prop {string} [max] The native `max` attribute
+ * @prop {string} [min] The native `min` attribute
+ * @prop {string} [step] The native `step` attribute
+ *
  * @prop {boolean} [required]
  * @prop {boolean} [disabled]
  * @prop {boolean} [readOnly]
@@ -127,10 +138,16 @@ InputField.propTypes = {
     inputWidth: propTypes.string,
     label: propTypes.string,
     loading: propTypes.bool,
+    /** The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmax), for use when `type` is `'number'` */
+    max: PropTypes.string,
+    /** The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmin), for use when `type` is `'number'` */
+    min: PropTypes.string,
     name: propTypes.string,
     placeholder: propTypes.string,
     readOnly: propTypes.bool,
     required: propTypes.bool,
+    /** The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefstep), for use when `type` is `'number'` */
+    step: PropTypes.string,
     tabIndex: propTypes.string,
     type: Input.propTypes.type,
     valid: sharedPropTypes.statusPropType,