Fix controlled mode displaying wrong value sometimes.

Fixes #24

Author: leMaik

src/TimeInput.js

@@ -55,15 +55,19 @@ class TimeInput extends React.Component {
 
   getFormattedValue = () => {
     const { mode, placeholder } = this.props
-    const { value, hasChanged } = this.state
+    const { hasChanged } = this.state
 
     const is12h = mode === '12h'
 
     if (placeholder && !hasChanged) return placeholder
 
-    // Allow a null/undefined value for controlled inputs
-    if (this.props.hasOwnProperty('value') && this.props.value == null) {
-      return ''
+    let value = this.state.value
+    if (this.props.hasOwnProperty('value')) {
+      if (this.props.value == null) {
+        // Allow a null/undefined value for controlled inputs
+        return ''
+      }
+      value = this.props.value
     }
 
     const { hours, isPm } = formatHours(value.getHours(), mode)

src/TimeInput.spec.js

@@ -70,6 +70,18 @@ describe('<TimeInput />', () => {
       const tree = mount(<TimeInput value={null} />)
       expect(getValue(tree)).toBe('')
     })
+
+    it('always ignores the internal state if a value is specified', () => {
+      const UnstyledTimeInput = unwrap(TimeInput)
+      const tree = mount(<UnstyledTimeInput classes={{}} value={new Date(2017, 10, 15, 14, 42, 0, 0)} mode='24h' />)
+
+      // simulate time selection
+      tree.instance().handleChange(new Date(2017, 10, 15, 13, 37, 0, 0))
+      tree.instance().handleOk()
+
+      // controlled component, so value should stay as specified by the prop (issue #11)
+      expect(getValue(tree)).toBe('14:42')
+    })
   })
 
   describe('uncontrolled mode', () => {