Draft-js: Android Web has Known Issues [Compilation of other issues]

[flarnie]

tdlr: Draft.js does not work correctly with some combinations of Android keyboards and mobile web browsers.

More details below:

Why was my issue merged into this one?

We know there are problems with Draft.js on mobile Android browsers, and merging all Android bug reports into one place keeps things organized and reduces noise.

Why is Draft.js broken on some Android phones?

Some Android keyboards do not send standard keyboard input events, and the information about what happened during the input is missing in the event data. As reported in issue #1067,
"When backspacing using some Android keyboards such as the Google keyboard, no key events are fired and no key codes are provided by the input event data when editOnInput gets called."
Also in general, we continue to encounter quirks and differences in general with Android web compared to other web platforms, and maintainers agree that it would require a rewrite of some parts of Draft.js in order to address the problem.

When will this be fixed?

Facebook maintainers are currently prioritizing other bug fixes and improvements, and we believe this problem will require a large investment to fully fix. So for now it's not being fixed.

This sucks and it's awful!!!!111

I agree, it's really a shame. Sorry we have not been able to fix it. Maintainers internally and externally have made several attempts, but none have been successful. Feel free to work on this in a fork if you are interested though! That's part of the beauty of Open source; you can take this code and make it better, and nobody can stop you.

Any work-arounds?

We would love help from an external contributor to write a guide on this. Some of the issues listed below have comments suggesting various hacks, but there is not an organized guide at this point.

What are the specific known bugs?

• The overall difference in the events which fire compared to other browsers: "Android does not fire onChange for every input event like desktop/iOS #580"

• Backspace leading to broken state: "Backspacing and deletion of immutable/segmented entities handled incorrectly with some Android keyboards" #1066 & "Wrong editorState after deleting (Android)" #1076 & "Deleting composition and starting new one results in extra character appearing" #1011

• Autocorrect can lead to a broken state: "Broken on Android mobile web" #102 & [Bug] "Android auto suggestion: inserts duplicate characters, hides content" #911 & "auto-correct creates bad state in Android 5.0" #1010 & "[Bug] Android auto suggestion: inserts duplicate characters, hides content" #911

• Selecting all can lead to a broken state: "Bug: Select all action on mobile devices breaks editor on Android" #954

• General issue where English words disappear with Google keyboard, and "Samsung Keyboard" drops Korean words: "There's input bug in Android keyboard #1224" & "Text gets lost on mobile devices" #1077 & "Draft editor does not take input from mobile keyboards" #1380

• Repeated words appearing in Firefox on Android: " Reapiting user insert android" #1079

• Chrome 65 on Android dispatches composition events when mouse moves: "Heads up: Chrome 65 will change composition events on Android #1657"

We will continue periodically to update this list with any new reports.

[chrbala]

Has anyone worked on getting a fallback scenario to a simple text input for Android? In some Android browsers, text does not propagate to the input field. I would like to work toward using Draft.js for progressive enhancement in browsers it does support well, but am unsure of how to reliably detect when I should fall back.

[Fi1osof]

+1

[leofrozenyogurt]

+1

[JanBussieck]

Given these persistent problems on Android, I am wondering what facebook does internally to address the problem. From a casual look at the page source, it seems like Draft-js is still in use on facebook.com, is there some fallback for Android? And if so, why wouldn't it be integrated into Draft-js?

Thanks :)

[srosset81]

@JanBussieck I don't think Facebook use Draft.js in production (I believe this is what implies this comment: https://github.com/facebook/draft-js/issues/102#issuecomment-189529908)

[kayhadrin]

Well as far as I know, we at FB don't use it on mobile due to the aforementioned issues.

[JLarky]

Given these persistent problems on Android, I am wondering what facebook does internally to address the problem. From a casual look at the page source, it seems like Draft-js is still in use on facebook.com, is there some fallback for Android? And if so, why wouldn't it be integrated into Draft-js?

That was exactly my thinking :) when you open Facebook from Android it switches to textarea input, so I'm planning to do exactly that for my website as well :)

[dminkovsky]

Does anyone have any thoughts on how to best perform the feature detection necessary run draft-js? I would like to drop down to a textarea in the event the client doesn't support the necessary features. Not sure how to best do that beyond detecting Android.

[JLarky]

Does anyone have any thoughts on how to best perform the feature detection necessary run draft-js? I would like to drop down to a textarea in the event the client doesn't support the necessary features. Not sure how to best do that beyond detecting Android.

I don't think it's about detecting features, but more about detecting bugs :) it depends on what is your manufacturer, what kind of keyboard you are using and so on. So you probably have to turn it into textarea for any Android phone and maybe add some opt-in for draft-js in case if user is sure that it works on this particular phone

[fabiomcosta]

There has been an effort on fixing most Android composition issues, making actually work on Android at https://github.com/facebook/draft-js/pull/2035
Help testing the PR is highly appreciated. There are instructions on how to do that on the PR and this codesandbox is setup with the package that has the PR applied to it: https://3ymzzlj9n5.codesandbox.io/

[claudiopro]

This was addressed with #2035, thank you @fabiomcosta. Y'all, feel free to open a new issue if there are still glitches with Android editing.