Mentions feature

[erikramalho]

Hey Eddy, your plugin is amazing (you know it because I’ve purchased it)

Lots of applications of this plugin could use a mention feature (something like WhatsApp, chat apps or Instagram) where you type a special character (@, for example) and a user list pops up.

I wonder if you ever thought on it... definitely would improve even more this plugin. We all could help you with the code. Could be something simple as a starting point...

[Bengejd]

He already has the baseline for this implemented - with onTextChanged(). All you have to do is pass it a function that parses the text for the @ sign, and if it is found, it pops up the taggable users. Then when a whitespace is found, it removes the taggable users from the view.

[JunkMyFunk]

I'm also looking to implement a mention feature and tried the approach suggested by @Bengejd, however this does not work.

Parsing the text using onTextChanged() is fine and you can pop up a list of users to select. On tapping one of them, the message box loses focus and the keyboard closes. I'm not sure if there's a way to interact with elements in the Webview while the keyboard is open without this happening?

[Bengejd]

@JunkMyFunk You could try setting the keyboard to stay open, and then pragmatically close it when it loses focus. Not ideal, but it's one way to go about it.

[JunkMyFunk]

@Bengejd Not sure which setting can be used to do that? There's keepOpenAfterSubmit and showKeyboard mentioned in the docs but I don't see any properties to control the behaviour when the input loses focus?

Also, it seems the initial tap in the WebView isn't registered on the element being tapped, it just shifts focus to the WebView. Only once it's focussed do taps start to get registered by the DOM elements themselves. Is there a way to enable this @EddyVerbruggen? We want to buy the plugin and currently this is the only thing stopping us. Cheers for great work by the way!

[EddyVerbruggen]

@JunkMyFunk Can you show me an isolated demo of the issue you describe? An adjusted version of this file would suffice.

[JunkMyFunk]

@EddyVerbruggen apologies for the delay, just got to putting a demo together for you. Updated demo/index.html is here

To demonstrate the issue, I have added a mention list to the html. It is displayed when you enter the @ character into the chatbox. Once the mention list is showing, you'll see that on tapping the list, the chatbox loses focus and keyboard closes. Furthermore, the mention list element does not receive the tap event and no console message will be shown from the tapMention function. Once the WebView has focus, tapping a name on the mention list again will register and show in the console, with the tap counter starting at 1 to show that this is the first mention tap event triggered.

Hope this helps.

[JunkMyFunk]

@EddyVerbruggen Not sure if you've had a chance to look a the demo I provided but I think this issue is a blocker for developing a WhatsApp-type app, not just with regards to the mention list feature. For instance, if you have a back button in the app header which navigates back to your list of chats/contacts, tapping it while in a chat with the keyboard open doesn't navigate - it just closes the keyboard. You must then tap a 2nd time to navigate.