Keyboard is closed when trying to delete mention

[quocanhbk]

Describe the bug When trying to delete the mention, it doesn't work and I also lose focus to the input, causing the keyboard to be closed.

To Reproduce Steps to reproduce the behavior:

1. Go to 'Demo page'
2. Type @ to see the mentions list and pick one
3. Try to delete the mention
4. It doesn't work and I lose focus to the input

Expected behavior The mention should be deleted and I still keep focus on the input

Video https://github.com/sodenn/lexical-beautiful-mentions/assets/64638082/e519a3e7-c619-425e-bce3-a534cdb09609

Smartphone (please complete the following information):

• Device: Xiaomi Redmi K40 Gaming
• OS: Android 13
• Browser: Chrome

Additional context The bug only happens on Android phone's Chrome (Xiaomi specifically)

[Sanjula007]

we are also facing the same issue

[dananjayarumesh]

Facing the same issue on Xiaomi devices

[sodenn]

After looking into it, there is no easy way to fix this issue. Other rich text editors have to deal with very similar problems. For example: https://github.com/ProseMirror/prosemirror/issues/565. Unfortunately, it is a known issue with the Android virtual keyboard in contenteditable elements. One possible workaround is to switch from DecoratorNode to TextNode, so the mention nodes would no longer have contenteditable=false. But that would change the current behavior and other known GBoard issues would still persist. For example: https://github.com/facebook/lexical/issues/4636.

[github-actions[bot]]

This issue is stale because it has been open for 60 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.

[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!

This fix is for tiptap/prosemirror but since the underlying problem is a browser bug this might help you guys as-well

 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'],
  ];