title: onClick not firing when using fontawesome
body: <p>I have a react component SearchField which is a wrapper around input. Im trying to get a fontawesome (x) to clear the input box when clicked, but all attempts to get the onClick to fire have failed.</p>
  
  <p>If I cut and paste to the parent div, the onClick fires.
  If i change the  element to a  element it still fails.
  Ive tried manually positioning it outside of the input using chrome tools, and it still fails to fire.
  Ive tried increasing the width and height, which also fails.</p>
  
  <p>Note: _base is a wrapper around React.Component</p>
  
  <p>Here's the code: </p>
  
  <pre><code>import React, { PropTypes }    from 'react';
  import _Base                   from '_Base';
  import _                       from 'underscore';
  import classNames              from 'classnames';
  
  export default class SearchField extends _Base {
    static defaultProps = {
      name:          null,
      placeholder:   null,
      onSearch:      null,
      searchOnEnter: true,
      liveSearch:    false,
      delay:         250
    };
  
    static propTypes = {
      name:          PropTypes.string.isRequired,
      placeholder:   PropTypes.string,
      onSearch:      PropTypes.func,
      searchOnEnter: PropTypes.bool,
      liveSearch:    PropTypes.bool,
      delay:         PropTypes.number,
    };
  
    state = {
      __value: null
    };
  
    constructor(props) {
      super(props);
      let me = this;
      if(props.delay &gt; 0){
        me.onKeyDown = _.debounce(me._onKeyDown, props.delay);
      } else {
        me.onKeyDown = me._onKeyDown;
      }
    }
  
    __onKeyDown(event) {
      event.persist();
      this.onKeyDown(event);
    }
  
    _onKeyDown(e) {
      var me = this
        , props = me.props
        , val   = me.refs.search.value
        ;
  
      me.setState({ __value: val });
  
      if(props.liveSearch ||
        (props.searchOnEnter &amp;&amp; e.key === "Enter")) {
        me._onSearch(val);
        return;
      }
    }
  
    _clearSearch() {
      var me = this;
  
      me.refs.search.value = "";
      me.setState({ __value: "" });
  
      me._onSearch("");
    }
  
    _onSearch(val) {
      var me = this
        , props = me.props
        ;
  
      if(props.onSearch) {
        props.onSearch({ name: props.name, value: val });
      }
    }
  
    render() {
  
      return (
        &lt;div className={classNames("search-field form-group has-feedback", this.props.className)}&gt;
          &lt;input
            ref            = {"search"}
            className      = "form-control"
            type           = "search"
            autoCapitalize = "none"
            autoComplete   = "off"
            autoCorrect    = "on"
            autoSave       = "true"
            autofocus      = "false"
            spellCheck     = "false"
            name           = {this.props.name}
            placeholder    = {this.props.placeholder}
            onKeyDown      = {this.__onKeyDown}
          /&gt;
          &lt;i className="fa fa-times-circle cursor-pointer form-control-feedback"
             onClick = {this._clearSearch}
             title   = "Clear Search"
          /&gt;
  
        &lt;/div&gt;
      );
    }
  }
  </code></pre>