Backspace on Android phones adds characters instead of deleting the @mention

[randolf]

trafficstars

Hello. Using the example at https://star-drug.glitch.me/ on Android phones (with Google Chrome or Opera) results in adding characters instead of deleting the @mention code. (Backspace does work as expected on a desktop PC running Linux or Windows.)

For example, if I add @JohnDoe as a mention, using the Backspace key to delete it results in adding more characters like "Do" or "oe" or "DDo" ... and each attempt to use the Backspace key keeps adding more of these.

[randolf]

Anyone who is looking into this matter will probably find this to be of relevant interest: https://github.com/ProseMirror/prosemirror/issues/837

[joelewis]

Thanks for reporting this @randolf

I can reproduce this issue on Android Chrome. I suspect it to be a problem with the mainstream project. Will figure out what's going wrong and update here.

[veesahni]

FYI - I can still reproduce this with Android / Chrome.

ProseMirror/prosemirror#837 is closed and the steps referenced in that issue don't cause a problem. So looks like that was unrelated.

[veesahni]

@joelewis - I've gathered more information for this one.

Perceived Bug: Cannot delete mentions in Android / Chrome

Why is this happening?: There's an underlying bug in Chrome that's been open since 2016 without much movement. In short: trying to remove a non-contenteditable sitting inside a contenteditable doesn't work properly.

Possible Workarounds:

• Add an invisible character around (or just after) the mention... and then delete the mention when the invisible character is removed. Messy
• tiptap, which is built on prosemirror has a similar issue. This comment pointed to this sample which is working properly on android / chrome. Here, the code is removing the mention if the character directly after the mention is removed.. less messy when it's typical to have a space right after the mention