combobox.jsx

class MyComboBox extends React.Component {
  
  constructor(props, context){
    super(props, context)
    this.state = { value: props.value }
  }
  
  componentWillReceiveProps(props){
    this.setState({ value: props.value })
  }
  
  render(){
    var value = this.state.value
    return <Combobox {...this.props} 
      onChange={ v => this._change(v) } 
      onBlur={ e => this._blur(e) }/>
  }
  
  _change(value){
    var isListItem = this.props.data.indexOf(value) !== -1 // this _should_ work, but you can always just check by id
    
    if ( isListItem)
      return this.props.onChange(value)
    
    this._needsValueFlush = true
    this.setState({ value })
  }
  
  _blur(){
    // the user moved away from the widget and its still not a list item
    if (this._needsValueFlush) {
      this._needsValueFlush = false
      this.props.onChange(this.props.value) // reset the value, you can do whatever you like here
    }
  }
}