diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 5ca8120ff4..bed7a00bb4 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -88,7 +88,13 @@ function Input(props) {
)
const rest = getUnhandledProps(Input, props)
const ElementType = getElementType(Input, props)
- const inputProps = _.pick(props, htmlInputPropNames)
+ const inputProps = {
+ ..._.pick(props, htmlInputPropNames),
+ // React gives a warning if no onChange is given to a controlled input. We
+ // handle the onChange on the wrapping element, so we don't actually need
+ // onChange on the input itself but let's pass a noop to suppress the warning.
+ onChange: _.noop,
+ }
if (children) {
return {children}
diff --git a/test/specs/elements/Input/Input-test.js b/test/specs/elements/Input/Input-test.js
index e20f4f059d..0fd6f2d451 100644
--- a/test/specs/elements/Input/Input-test.js
+++ b/test/specs/elements/Input/Input-test.js
@@ -4,6 +4,7 @@ import React from 'react'
import Input, { htmlInputPropNames } from 'src/elements/Input/Input'
import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
describe('Input', () => {
common.isConformant(Input)
@@ -27,7 +28,7 @@ describe('Input', () => {
common.implementsHTMLInputProp(Input, {
alwaysPresent: true,
- shorthandDefaultProps: { type: 'text' },
+ shorthandDefaultProps: { type: 'text', onChange: _.noop },
})
common.propValueOnlyToClassName(Input, 'size')
@@ -62,4 +63,23 @@ describe('Input', () => {
})
})
})
+
+ describe('onChange', () => {
+ it('handles onChange', () => {
+ const onChangeSpy = sandbox.spy()
+ const wrapper = mount()
+
+ wrapper
+ .find('input')
+ .simulate('change')
+
+ onChangeSpy.should.have.been.called()
+ })
+
+ it('supplies noop onChange to suppress controlled warning', () => {
+ shallow()
+ .find('input')
+ .should.have.prop('onChange', _.noop)
+ })
+ })
})