onClick handler not fired on children

[scott-coates]

<Link to='/home' onClick={this.onItemClick}>
  <i className="fa fa-file"></i>   
  <span id='works'>Click me - I work!!</span>
  <Highlighter search={this.props.query} caseSensitive={false}>
    {this.props.name}
  </Highlighter>
</Link>

this.onItemClick is only invoked when clicking on span#works. However, clicking any of the elements from Highlighter doesn't actually propagate the event in any way. I've found that it does work when I remove {'key': this.count} from the children in the array.

[rafaelcorreiapoli]

I'm also facing this issue.

[lnmunhoz]

+1

[franciscopuyo]

+1

[hartuvofir]

line 177 : React.DOM.span({'key': string}, string);
line 191 : key: string,

The problem was that each element get the same key (count).
with string its unique

[lnmunhoz]

I stopped using this package and started using react-hightlight-words. It fixed this issue.

[janmyler]

There's a PR open #46 to fix it, however, it usually takes a rather long time to get anything merged.

[ericgio]

As a workaround, you can set pointer-events: none on the highlighter component.