Closed quocanhbk closed 4 months ago
we are also facing the same issue
Facing the same issue on Xiaomi devices
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.
This issue is stale because it has been open for 60 days with no activity.
This issue was closed because it has been inactive for 7 days since being marked as stale.
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'],
];
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:
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):
Additional context The bug only happens on Android phone's Chrome (Xiaomi specifically)