[changed] Stop holding input value in state

a.k.a. replace `props.initialValue` with `props.value`. This change makes the
behaviour of Autocomplete closer to that of native input elements, i.e. you are
forced to always supply the current value which the input should display, and
the element will provide the updated value via the `onChange` callback (and
`onSelect`).

Upgrade path:

Before:
```js
class MyWidget extends Component {
  render() {
    return (
      <Autocomplete
        initialValue="hello"
      />
    )
  }
}
```

After:
```js
class MyWidget extends Component {
  constructor() {
    this.state = { value: 'hello' }
  }
  render() {
    return (
      <Autocomplete
        value={this.state.value}
        onChange={event => this.setState({ value: event.target.value })}
        onSelect={value => this.setState({ value })}
      />
    )
  }
}
```

This is obviously a breaking change.

Closes #49

Author: CMTegner

lib/Autocomplete.js

@@ -6,7 +6,7 @@ let _debugStates = []
 let Autocomplete = React.createClass({
 
   propTypes: {
-    initialValue: React.PropTypes.any,
+    value: React.PropTypes.any,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     shouldItemRender: React.PropTypes.func,
@@ -17,6 +17,7 @@ let Autocomplete = React.createClass({
 
   getDefaultProps () {
     return {
+      value: '',
       inputProps: {},
       onChange () {},
       onSelect (value, item) {},
@@ -39,7 +40,6 @@ let Autocomplete = React.createClass({
 
   getInitialState () {
     return {
-      value: this.props.initialValue || '',
       isOpen: false,
       highlightedIndex: null,
     }
@@ -88,11 +88,7 @@ let Autocomplete = React.createClass({
 
   handleChange (event) {
     this._performAutoCompleteOnKeyUp = true
-    this.setState({
-      value: event.target.value,
-    }, () => {
-      this.props.onChange(event, this.state.value)
-    })
+    this.props.onChange(event, event.target.value)
   },
 
   handleKeyUp () {
@@ -146,17 +142,17 @@ let Autocomplete = React.createClass({
       }
       else {
         var item = this.getFilteredItems()[this.state.highlightedIndex]
+        var value = this.props.getItemValue(item)
         this.setState({
-          value: this.props.getItemValue(item),
           isOpen: false,
           highlightedIndex: null
         }, () => {
           //React.findDOMNode(this.refs.input).focus() // TODO: file issue
           React.findDOMNode(this.refs.input).setSelectionRange(
-            this.state.value.length,
-            this.state.value.length
+            value.length,
+            value.length
           )
-          this.props.onSelect(this.state.value, item)
+          this.props.onSelect(value, item)
         })
       }
     },
@@ -174,21 +170,21 @@ let Autocomplete = React.createClass({
 
     if (this.props.shouldItemRender) {
       items = items.filter((item) => (
-        this.props.shouldItemRender(item, this.state.value)
+        this.props.shouldItemRender(item, this.props.value)
       ))
     }
 
     if (this.props.sortItems) {
       items.sort((a, b) => (
-        this.props.sortItems(a, b, this.state.value)
+        this.props.sortItems(a, b, this.props.value)
       ))
     }
 
     return items
   },
 
   maybeAutoCompleteText () {
-    if (this.state.value === '')
+    if (this.props.value === '')
       return
     var { highlightedIndex } = this.state
     var items = this.getFilteredItems()
@@ -198,13 +194,13 @@ let Autocomplete = React.createClass({
       items[highlightedIndex] : items[0]
     var itemValue = this.props.getItemValue(matchedItem)
     var itemValueDoesMatch = (itemValue.toLowerCase().indexOf(
-      this.state.value.toLowerCase()
+      this.props.value.toLowerCase()
     ) === 0)
     if (itemValueDoesMatch) {
       var node = React.findDOMNode(this.refs.input)
       var setSelection = () => {
         node.value = itemValue
-        node.setSelectionRange(this.state.value.length, itemValue.length)
+        node.setSelectionRange(this.props.value.length, itemValue.length)
       }
       if (highlightedIndex === null)
         this.setState({ highlightedIndex: 0 }, setSelection)
@@ -232,12 +228,12 @@ let Autocomplete = React.createClass({
   },
 
   selectItemFromMouse (item) {
+    var value = this.props.getItemValue(item);
     this.setState({
-      value: this.props.getItemValue(item),
       isOpen: false,
       highlightedIndex: null
     }, () => {
-      this.props.onSelect(this.state.value, item)
+      this.props.onSelect(value, item)
       React.findDOMNode(this.refs.input).focus()
       this.setIgnoreBlur(false)
     })
@@ -266,7 +262,7 @@ let Autocomplete = React.createClass({
       top: this.state.menuTop,
       minWidth: this.state.menuWidth,
     }
-    var menu = this.props.renderMenu(items, this.state.value, style)
+    var menu = this.props.renderMenu(items, this.props.value, style)
     return React.cloneElement(menu, { ref: 'menu' })
   },
 
@@ -310,7 +306,7 @@ let Autocomplete = React.createClass({
           onKeyDown={(event) => this.handleKeyDown(event)}
           onKeyUp={(event) => this.handleKeyUp(event)}
           onClick={this.handleInputClick}
-          value={this.state.value}
+          value={this.props.value}
         />
         {this.state.isOpen && this.renderMenu()}
         {this.props.debug && (