search

helior / react-highlighter

:high_brightness: Highlight text using React
MIT License
157 stars 42 forks source link

onClick handler not fired on children #20

Open scott-coates opened 8 years ago

scott-coates commented 8 years ago 
<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 commented 8 years ago

I'm also facing this issue.

lnmunhoz commented 8 years ago

+1

franciscopuyo commented 7 years ago

+1

hartuvofir commented 7 years ago

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 commented 7 years ago

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

janmyler commented 7 years ago

There's a PR open https://github.com/helior/react-highlighter/pull/46 to fix it, however, it usually takes a rather long time to get anything merged.

ericgio commented 7 years ago

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