Draft-js: There's input bug in Android keyboard

[kcd71461]

Non-English language input text disappears when using "Samsung keyboard".
korean language input text not disappears when i use "Google Korean Keyboard" but English is disappears.
There is also the same bug in the "https://draftjs.org/" website demo.

phone: Galaxy S8
browser: mobile Chrome
video: https://www.youtube.com/watch?v=VcKOBssYzdQ

[flarnie]

Thanks for reporting this - we have run into many issues with certain android keyboards for mobile web.

So far Draft has not been able to fully support all mobile devices, in particular android. This is mentioned in the "Manual Testing - FAQ" but should really be mentioned in our "Issues and Pitfalls" docs. I'll add something about that right now.

For the future, we are interested in improving support for mobile web.

[JLarky]

I have similar bug but with English input (or rather any input) using google keyboard (Gboard).

demo: https://www.youtube.com/watch?v=UseNGCmatFg

It will only add something to input when I use autocomplete

[jan4984]

you need run dratf in a app (webview）,then do hacks in a wrapped InputConnection

[robbertbrak]

This seems to specifically affect Android 7+.

From what I have seen (using https://dvcs.w3.org/hg/d4e/raw-file/tip/key-event-test.html), In Android 6- there is a textInput event just before the compositionend event that Draft is relying on, but which is absent in Android 7+.

This could be fixed by adding a specific case for Android 7+ in DraftEditorCompositionHandler, but it might also be possible to somehow improve the BeforeInputEventPlugin of React. @flarnie, do you have any thoughts on this?

[mathieumg]

@robbertbrak @flarnie I'm not an expert, but after looking at it a bit, in https://github.com/facebook/draft-js/blob/6f2bf66bacff3ffac234fc21ff3720344ff92776/src/component/handlers/edit/editOnBeforeInput.js#L78 on Android I get an extra event with the whole previous word in chars when I type the space character. On on desktop, when typing test_ (where _ is a space, hitting the space bar and not an actual underscore), I get the following events:

t, e, s, t, (space)

and on Android I get the following events (and everything disappears):

t, e, s, t, test, (space)

If I hardcode it to ignore the event that has test, the editor works normally. This sounds like it might actually be related to autocomplete, even if the word is complete, pressing space sends out the word as a whole again along with a space. If I don't type anything but autocomplete a word from the start, it works correctly. (So only the test and (space) events get sent in that scenario) Also, I don't know if it's supposed to happen at that point, but the editor doesn't get put into composition mode.

Edit:

On Android, if typing "test" and autocompleting with "testing", the editor only displays "ing".

[mathieumg]

Following my previous message: It seems that the composition never starting was a problem caused by SwiftKey. There might be a workaround to it on the DraftJS side, but I don't know it.

Using the Gboard keyboard, the composition starts and it seems that it's more related to what @robbertbrak describes above. After investigating, it seems it's because beforeinput is no longer fired. However, compositionupdate is fired but is not currently handled by DraftJS. If I introduce this simple change, everything seems to work perfectly: https://github.com/mathieumg/draft-js/commit/a6dd47f41bfa327f980295b1f177f98af039c7bd

[flarnie]

Just removing the 'help wanted' tag since right now we are prioritizing fixing the known bugs on Desktop web rather than trying to fix the vast range of problems with mobile web rich text input.

[lan9]

Edit: I realized there is another thread discussing the approach on https://github.com/facebook/draft-js/pull/1285, let me read that one first.

I was able to reproduce the text-disappear-after-pressing-space issue (https://www.youtube.com/watch?v=UseNGCmatFg) on an Samsung galaxy phone (Android 6) with Samsung keyboard (default keyboard) and latest Chrome. I verified @mathieumg 's change to handle compositeUpdate event (https://github.com/mathieumg/draft-js/commit/a6dd47f41bfa327f980295b1f177f98af039c7bd) fixed the issue.

@flarnie , given it fixes bugs with default keyboards (Gboard and Samsung keyboards), it's quite impactful. Do you think it makes sense to review the PR?

[flarnie]

Merging this into a general Android bug issue - see https://github.com/facebook/draft-js/issues/1895