Any way to add event handlers to the mentions

[geralt-debugs]

trafficstars

Expected behaviour: I need a way through which I can add event handlers(like onClick, onHover), etc on mentions. I actually need to perform some actions when the user clicks on a mention. Is there a way I can achieve it?

Observed behaviour: I could not find any pubic API through which I can attach events

Workaround: For read-only mode, I was forced to resort to not using react-mentions, and to develop my own component to handle it. It would be better if react-mentions would accept the handlers, and wrap them. So that when the handlers are invoked, react-mentions could also pass some useful information about the mention.

Happy to help

[frontendphil]

Hey there. What I'd recommend is to use the renderSuggestion prop to achieve this. You can return any valid react element from this function. So in there you could also set up the handlers you've been talking about.

<Mention
  renderSuggestion={(entry, search, highlightedDisplay, index, focused) => (
    <div onMouseEnter={...} onMouseLeave={...} onClick={...} />
  )}
/>

[kurtzcarson]

I believe I have the same question as @rramaa, and was hoping @frontendphil could elaborate as I do not see how the proposed solution would resolve the issue. It seems that the proposed solution is when the user clicks on the mention from the menu of suggestions, not when the user clicks the mention after its creation.

Is there a direct way for me to add an event handler to the mention after it is created. For example, imagine this sentence assuming 'awesome' is the referred mention.

The concert was #awesome.

Is there a way to add event handlers (like onClick or onHover ) to the mention '#awesome' after it has been created such that when the user clicks the '#awesome' mention I could maybe change the style of the mention or manipulate some background data?

Please let me know if I need to clarify. Thank you!

[geralt-debugs]

@kurtzcarson @frontendphil yes this was exactly my use case. We are already using renderSuggestion for customizing the dropdown. But my use case is I want to attach events to the mentions which were rendered in read-only mode(like facebook does, when we hover over a tagged user in a comment).

[nicoladj77]

@rramaa @kurtzcarson did you find any solution?

[khou22]

Also curious to hear if folks found a solution — this would be a pretty great feature.