react-mentions

react-mentions copied to clipboard

Because react-mentions monitors the beginning and end of mentions using a regular expression, allowSpaceInQuery means every character except the trigger, including whitespace, is potentially part of a mention, and a search is initiated on every change, even paragraphs later. This is unexpected behavior with negative consequences.

I ran into this and the potential workarounds were prohibitively complicated and buggy.

I suggest that when allowSpaceInQuery-esque behavior is enabled, instead of a regular expression, a 'mention-mode' should be entered upon typing the trigger (or triggering it programmatically).

• Accepting an option should insert the mention markdown.
• Escaping this mode (with esc or moving focus from it) should transform the content into plain text.

This would allow any character in the mention text, including the trigger character, without any unpleasant side effects.

Hey @bdjnk can you elaborate a bit on what you're actually trying to achieve and how this behavior affects you negatively?

Hello @frontendphil, sorry for the delay. I'd be happy to elaborate.

what I'm trying to achieve

Let's say I'm trying to complete users by full name after an @ in a discussion system in order to notify them.

For example, a user is trying to ping john smith in the message, but there are too many john and too many smith.

Just wanted to make sure @john smith is aware of this discussion.

Ostensibly this can be solved by allowSpaceInQuery, but it misbehaves.

how current behavior affects me negatively

If a user types an @ without intending to mentions a user, bad behavior ensues.

Let's take some slightly contrived examples.

Driving, @office in 5

Found pallet @lot12. Let the shipper know. We also need to talk about how to avoid this situation in the future.

In such cases react-mentions will keep searching for user name matches, even though the user isn't looking to insert a user name. Searches will continue to be sent to the server.

In attempting to implement a system to prevent the server from being spammed, I discovered it to be prohibitively complex.

Any update on this?

So far we consciously avoided having a "mentions mode" because we believe it will make the component significantly more complex. I do see @bdjnk's point and we are happy to explore ways to support the described use case. So if anyone wants to pick up work on this, we are here to support and review PRs.

The current implementation of allowSpaceInQuery has been a bit of a pain point for me. A workaround we used is to abort the network call if the query will have more than three spaces.

@randseay could you share the implementation code? From my perspective, I was looking to simply cancel an active mentioning if the returned data is empty—no luck.

Was this resolved as part of any new versions of react-mentions package, without workaround mentioned by @randseay ?

Can we use a contenteditable div instead so that we can pass the value to backend also... how can we send a plain text to backend for re-rendering