Mention node broken on android

[chrisjbrown]

Describe the bug on an Android device using chrome browser

in the editor with the cursor in front of a mention node the editor either skips over the mention deleting the previous node or copying and pasting the contents of the mention node.

these can be observed on the example page https://tiptap.scrumpy.io/suggestions

Environment

• OS: Android
• Chrome

[philippkuehn]

can you upload a video/gif of the bug please? don‘t have an android device for testing. thanks!

[chrisjbrown]

gif added. thanks

[chrisjbrown]

is there any error in the console?

No there's not

I see quite a lot edge case checks for android in prosemirror-view might the suggestitons plugin or mention node be circumventing some of this? https://github.com/ProseMirror/prosemirror-view/search?q=android&unscoped_q=android

[chanlito]

My team and I face this issue with other editors as well, our solution was to put a close or delete button on the mention element for cases like this.

[Zanzavar]

We are also facing the same issue as well on Android Chrome 81

[cseufert]

Also appears on android chome if you backspace immediately after adding a new mention, it starts randomly adding parts of the mention, if you just hold backspace, it just backspace some, and added more copies (some partial) of the mentions.

[tobischulz]

Have bugs on Android as well for mentions:

• Sometimes suggestions are not selectable by touch or pressing enter on keyboard
• On backspace the mention will not be deleted, instead the lastname will append to the editor content every click on backspace

Got a gif attached as well to show the bugs. Would be awesome if there would be a fix for need.

Android Chrome 81.0.4044.138

[chenlevy]

Same issue here

[obj63mc]

My work around so far has been to add a undo/redo buttons on the toolbar as sort of a catch all. That works fine deleting the mention. https://tiptap.dev/history

[snickbit]

I'm having the same issues as @chrisjbrown and @tobischulz but from what I can tell it's dependent on the keyboard app. Only the replication issue seems to happen on Google's Gboard, but only the original issue of being unable to delete with backspace occurs on the Samsung stock keyboard. At least that's the case on my Galaxy S20. I also have a user with Microsoft Swiftkey that is experiencing the replication issue when they press space after a mention.

[reznikovandrew]

Same issue here for Android, Chrome. Fast easy solution: copy Mention.js, and add space to suggestion label at the end.

[philippkuehn]

can you test this again in v2 please?

[Zanzavar]

Yep, its still there, can reproduce it on Android Mi 3 device here https://www.tiptap.dev/examples/suggestions

[aizaiz]

is there any quick solution for this on v2?

[aizaiz]

I've found this solution https://github.com/ueberdosis/tiptap/issues/1264#issuecomment-833099584, even though we lost some performances at least it works on android

[carlosagsmendes]

Hey, we want to adopt tiptap but not supporting mentions on Android is a big showstopper. What's the best workaround available? Add the delete button to the mention? Thanks in advance

[vdlmark]

We are also having this issue, workaround can be managed, but is there any word on a fix in the nearby future?

[veesahni]

On tiptap v2, you still cannot delete mentions on 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.

Workaround: https://github.com/ueberdosis/tiptap/issues/1264#issuecomment-833099584 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. It also seems to inject a non-visible character directly after the mention when you select a mention.

Perhaps this workaround can be brought into tiptap mention plugin, as an option?

[fridaystreet]

@veesahni the workaround still seems to have issues. it's fine if you type a mention then delete, or if you put the cursor in front of some text after the mention and start deleting, but if you put the cursor after the mention directly, on backspace the keyboard dissappears like it's lost focus. I haven't tried yet, but possible this combined with the fix that adds a space after the mention might do the trick?

desparately need a fix for this. We started out with draftjs and while mentions etc worked, android is non-existent. So we moved to Plate (slatejs underneath) very promising in initial testing, but after we'd got it deployed we were seeing all sorts of issues across different devices. Not to mention it's such a complex framework and plate is no better at abstracting the complexity.

Just found tiptap, tried everything out and was great, no general input issues in android like the others (ie skipping chars, issues with autocorrect). It's such an easy framework to implement, then found this issue with the delete. I'm going to try this on update and maybe couple it with a 'x' delete inside the mention label itself. The hope being, if someone is trying to delete an existing mention (eg editing) that they'd hit the x, otherwise if it's just backspace in normal typing that seems to work.

Seems no framework has this naled yet :-(

keeping fingers crossed for a robust solution

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[17Amir17]

To anyone who is still seeing this, I was able to fix this while working on https://10play.github.io/10tap-editor/docs/examples/mentions

The fix I had was to wrap the contenteditable=false with contenteditable=true in addition to adding these two special characters to the end of the node \uFEFF \u200B and now it works great!

 renderHTML({options, node}) {
  return [
    'span',
    {contenteditable: true},
    [
      'span',
      mergeAttributes(
        {class: classes.join(' '), contenteditable: false},
        options.HTMLAttributes,
      ),
      `${options.suggestion.char}${
        node.attrs.label ?? node.attrs.id
      }`,
    ],
    ['span', {}, '\uFEFF'],
    ['span', {}, '\u200B'],
  ];

[pastukh-dm]

@17Amir17 your solution worked well for me

[nperez0111]

@17Amir17 Can you share how you came to this conclusion. Specifically the special characters are of interest to me