facebookarchive / draft-js

A React framework for building text editors.
https://draftjs.org/
MIT License
22.57k stars 2.64k forks source link

Editor bugs when using google keyboard on android #2983

Open consoleLogIt opened 3 years ago

consoleLogIt commented 3 years ago

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

OS: Android 10 draft-js: 0.11.7 Browser: Chrome Keyboard: Gboard (Google Keyboard)

Issue 1: when i type some thing and press return to add new line the cursor jumps to the beginning of the editor.

This screenshot demonstrates the issue 1

Animation In console you can see that keycode is not getting printed for each character i am typing and when i press return the cursor jumps to beginning of the editor. It works perfect when i add an extra space at end and then press return key, you can also see the "split-block" command getting printed in the console in this case.

Issue 2: When i type something and try to go to another editor, the cursor jumps back to the last editor.

This screenshot demonstrates the issue 2

Animation2 In console you can see when i type something and try to go to another editor, Invalid selection state waring is getting printed on the console and cursor jumps back to the editor i was editing lastly.

Adding the log file draft logs.log

I am getting these issues with Gboard (default google keyboard for Android) and when i use a different keyboard called Microsoft SwiftKey Keyboard for Android everything is working as expected. Please Let me know if more information is required. Thank you

volcinschi commented 3 years ago

I am having the same issue as well :(

consoleLogIt commented 3 years ago

@BitterTreble hi, any luck with this issue?

musme commented 3 years ago

hi, guys, having some bug on Android with Gboard (

dcollien commented 3 years ago

Same issue

aaronncfca commented 2 years ago

I'm seeing Issue 1 as well. Could be linked to the fact that GBoard on Chrome on Android produces compositionupdate events rather than firing keydown/up with the "enter" keyCode. See discussions here and here. You can use this tool to see what exact events are fired: https://domeventviewer.com/key-event-viewer-ce.html.

I wonder if https://github.com/facebook/draft-js/pull/1419 would move towards addressing this issue? (Haven't tested.) Unfortunately, that PR seems to have been abandoned. I'd love to hear whether Facebook is currently putting any effort towards Android compatability!

Noushad-web commented 2 years ago

I'm facing the same issue, Is there any alternative ???

Noushad-web commented 2 years ago

I'm seeing Issue 1 as well. Could be linked to the fact that GBoard on Chrome on Android produces compositionupdate events rather than firing keydown/up with the "enter" keyCode. See discussions here and here. You can use this tool to see what exact events are fired: https://domeventviewer.com/key-event-viewer-ce.html.

I wonder if #1419 would move towards addressing this issue? (Haven't tested.) Unfortunately, that PR seems to have been abandoned. I'd love to hear whether Facebook is currently putting any effort towards Android compatability!

But Why Its working fine if we just edit a space or dot before enter?

Noushad-web commented 2 years ago

Its the comment of another rich text editor which also made of contenteditable div, I really like the way they handle the issue. Let's check if it can help us. https://github.com/ProseMirror/prosemirror/issues/904#issuecomment-477568264

consoleLogIt commented 2 years ago

I'm seeing Issue 1 as well. Could be linked to the fact that GBoard on Chrome on Android produces compositionupdate events rather than firing keydown/up with the "enter" keyCode. See discussions here and here. You can use this tool to see what exact events are fired: https://domeventviewer.com/key-event-viewer-ce.html. I wonder if #1419 would move towards addressing this issue? (Haven't tested.) Unfortunately, that PR seems to have been abandoned. I'd love to hear whether Facebook is currently putting any effort towards Android compatability!

But Why Its working fine if we just edit a space or dot before enter?

@Noushad-web i don't know about dot but in case on space it is working correctly because in GBoard when you hit space, you actually get out of the composition mode.

i suggest checking out @aaronncfca comment above