[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

@@ -7,7 +7,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,
@@ -19,6 +19,7 @@ let Autocomplete = React.createClass({
 
   getDefaultProps () {
     return {
+      value: '',
       inputProps: {},
       labelText: '',
       onChange () {},
@@ -42,7 +43,6 @@ let Autocomplete = React.createClass({
 
   getInitialState () {
     return {
-      value: this.props.initialValue || '',
       isOpen: false,
       highlightedIndex: null,
     }
@@ -92,11 +92,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 () {
@@ -151,17 +147,17 @@ let Autocomplete = React.createClass({
       else {
         // text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
         var item = this.getFilteredItems()[this.state.highlightedIndex]
+        var value = this.props.getItemValue(item)
         this.setState({
-          value: this.props.getItemValue(item),
           isOpen: false,
           highlightedIndex: null
         }, () => {
           //this.refs.input.focus() // TODO: file issue
           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)
         })
       }
     },
@@ -179,21 +175,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()
@@ -203,13 +199,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 = 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)
@@ -237,12 +233,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)
       this.refs.input.focus()
       this.setIgnoreBlur(false)
     })
@@ -271,7 +267,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' })
   },
 
@@ -318,7 +314,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}
           id={this.id}
         />
         {this.state.isOpen && this.renderMenu()}