React clearable input

input-clearable.js

/**
 * <InputClearable />
 *
 * @es6
 * @jsx React.DOM
 */

module React from "react"

import IconSvg from "../iconsvg"

export default React.createClass({
  getInitialState() {
    return {
      value: this.props.value || ""
    }
  },

  render() {
    return (
      <span className="InputClearable">
        {this.transferPropsTo(<input ref="input" className={"InputClearable-input"} value={this.state.value} onChange={this.handleChange}/>)}
        <IconSvg key="InputClearable-clearButton" className={"InputClearable-clearButton"} hidden={!this.state.value} onClick={this.clearValue} />
      </span>
    )
  },

  clearValue(e) {
    this.setState({value: ""}, function () {
      // call onChange event
      // this.props.onChange(e) // INFINITE LOOP DUDE, OBVIOUSLY

      // give focus back
      this.refs.input.getDOMNode().focus()
    })
  },

  handleChange(e) {
    this.setState({value: e.currentTarget.value}, function() {
      console.log("on change dude")
      this.props.onChange(e)
    })
  }
})