Android Web has Known Issues [Compilation of other issues] #1895
Comments
|
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. |
|
+1 |
1 similar comment
|
+1 |
|
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 :) |
|
@JanBussieck I don't think Facebook use Draft.js in production (I believe this is what implies this comment: #102 (comment)) |
|
Well as far as I know, we at FB don't use it on mobile due to the aforementioned issues. |
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 :) |
This duplication of ApprovalCommentForm replaces the DraftJSMentionSelector with a simple TextArea due to complications with Android autocomplete interfering with draft.js See facebookarchive/draft-js#1895
This duplication of ApprovalCommentForm replaces the DraftJSMentionSelector with a simple TextArea due to complications with Android autocomplete interfering with draft.js See facebookarchive/draft-js#1895
This duplication of ApprovalCommentForm replaces the DraftJSMentionSelector with a simple TextArea due to complications with Android autocomplete interfering with draft.js See facebookarchive/draft-js#1895 - Remove all draftjs components from ApprovalCommentForm - Upgrade BRUI to use TextArea hideLabel prop
|
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 |
|
There has been an effort on fixing most Android composition issues, making actually work on Android at #2035 |
Summary: This PR is a new attempt to address #1895 On #2031 I was trying to make compositions work using the data provided by that event, and even though that works well for most operational system, that doesn't work well for Android, where you can make composition updates in multiple places on the same composition transaction. This PR is an improvement over that PR, in that it uses a DOM mutation observer during the `compositionStart` -> `compositionEnd` interval to detect the changes the user made, and then re-apply those to the ContentState on `compositionEnd`. This approach is the one used by [Prosemirror](http://prosemirror.net/) (see https://github.com/ProseMirror/prosemirror-view/blob/master/src/domobserver.js), which is the only Rich Text Editor I've tried that works well on Android. Like previously mentioned, it allows multiple mutations on multiple places in the same composition transaction, which was impossible with the previous approach, and would cause DOM<->state inconsistencies in multiple use cases. The intent of this PR is not to fix every single Android bug, but to have a consistent editing experience on Android without introducing bugs (ideally). **TODO, known issues:** - [x] Removing empty line breaks with <backspace> doesn’t remove blocks. - [x] Mutations on the same block (different leaf nodes) are not being properly applied. - [x] Selection is not properly updated during composition events - [ ] Keep `inlineStyleOverride` working with a consistent behavior **TODO, others:** - [x] Test on Android Pie v9 API 28 - [x] Test on Android Oreo v8.1 API 27 - [x] Test on Android Oreo v8.0 API 26 - [x] Test on iPhone 12.1 (with Japanese Kana keyboard) - [x] Test composition events on Chrome Desktop v73 - [x] Test composition on IE11 (I didn't know how to test composition events though) - [x] Unit tests There are 3 ways to try out this PR. Codesandbox: https://3ymzzlj9n5.codesandbox.io/ (uses `draft-js-android-fix-beta.3`) Use the published [draft-js-android-fix](https://www.npmjs.com/package/draft-js-android-fix) package: `yarn install draft-js-android-fix` Note that this package might not be up-to-date, it's hard for me to guarantee I'll always remember to update the package, but I'll do my best. The other way is guaranteed to be up-to-date, but has a longer setup: * run `git clone https://github.com/facebook/draft-js.git` * run `git remote add fabiomcosta https://github.com/fabiomcosta/draft-js.git` * run `git fetch fabiomcosta` * run `git checkout -b attempt_android_fix_with_dom_diff fabiomcosta/attempt_android_fix_with_dom_diff` * run `yarn install` (or use `npm`) * run `open examples/draft-0-10-0/rich/rich.html`, or any other example you'd like to test Pull Request resolved: #2035 Reviewed By: kedromelon Differential Revision: D14568528 Pulled By: claudiopro fbshipit-source-id: 16861de52eca41cd98f884b0aecf034213fc1bd0
|
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. |
Summary: This PR is a new attempt to address facebookarchive#1895 On facebookarchive#2031 I was trying to make compositions work using the data provided by that event, and even though that works well for most operational system, that doesn't work well for Android, where you can make composition updates in multiple places on the same composition transaction. This PR is an improvement over that PR, in that it uses a DOM mutation observer during the `compositionStart` -> `compositionEnd` interval to detect the changes the user made, and then re-apply those to the ContentState on `compositionEnd`. This approach is the one used by [Prosemirror](http://prosemirror.net/) (see https://github.com/ProseMirror/prosemirror-view/blob/master/src/domobserver.js), which is the only Rich Text Editor I've tried that works well on Android. Like previously mentioned, it allows multiple mutations on multiple places in the same composition transaction, which was impossible with the previous approach, and would cause DOM<->state inconsistencies in multiple use cases. The intent of this PR is not to fix every single Android bug, but to have a consistent editing experience on Android without introducing bugs (ideally). **TODO, known issues:** - [x] Removing empty line breaks with <backspace> doesn’t remove blocks. - [x] Mutations on the same block (different leaf nodes) are not being properly applied. - [x] Selection is not properly updated during composition events - [ ] Keep `inlineStyleOverride` working with a consistent behavior **TODO, others:** - [x] Test on Android Pie v9 API 28 - [x] Test on Android Oreo v8.1 API 27 - [x] Test on Android Oreo v8.0 API 26 - [x] Test on iPhone 12.1 (with Japanese Kana keyboard) - [x] Test composition events on Chrome Desktop v73 - [x] Test composition on IE11 (I didn't know how to test composition events though) - [x] Unit tests There are 3 ways to try out this PR. Codesandbox: https://3ymzzlj9n5.codesandbox.io/ (uses `draft-js-android-fix-beta.3`) Use the published [draft-js-android-fix](https://www.npmjs.com/package/draft-js-android-fix) package: `yarn install draft-js-android-fix` Note that this package might not be up-to-date, it's hard for me to guarantee I'll always remember to update the package, but I'll do my best. The other way is guaranteed to be up-to-date, but has a longer setup: * run `git clone https://github.com/facebook/draft-js.git` * run `git remote add fabiomcosta https://github.com/fabiomcosta/draft-js.git` * run `git fetch fabiomcosta` * run `git checkout -b attempt_android_fix_with_dom_diff fabiomcosta/attempt_android_fix_with_dom_diff` * run `yarn install` (or use `npm`) * run `open examples/draft-0-10-0/rich/rich.html`, or any other example you'd like to test Pull Request resolved: facebookarchive#2035 Reviewed By: kedromelon Differential Revision: D14568528 Pulled By: claudiopro fbshipit-source-id: 16861de52eca41cd98f884b0aecf034213fc1bd0
Summary: This PR is a new attempt to address facebookarchive#1895 On facebookarchive#2031 I was trying to make compositions work using the data provided by that event, and even though that works well for most operational system, that doesn't work well for Android, where you can make composition updates in multiple places on the same composition transaction. This PR is an improvement over that PR, in that it uses a DOM mutation observer during the `compositionStart` -> `compositionEnd` interval to detect the changes the user made, and then re-apply those to the ContentState on `compositionEnd`. This approach is the one used by [Prosemirror](http://prosemirror.net/) (see https://github.com/ProseMirror/prosemirror-view/blob/master/src/domobserver.js), which is the only Rich Text Editor I've tried that works well on Android. Like previously mentioned, it allows multiple mutations on multiple places in the same composition transaction, which was impossible with the previous approach, and would cause DOM<->state inconsistencies in multiple use cases. The intent of this PR is not to fix every single Android bug, but to have a consistent editing experience on Android without introducing bugs (ideally). **TODO, known issues:** - [x] Removing empty line breaks with <backspace> doesn’t remove blocks. - [x] Mutations on the same block (different leaf nodes) are not being properly applied. - [x] Selection is not properly updated during composition events - [ ] Keep `inlineStyleOverride` working with a consistent behavior **TODO, others:** - [x] Test on Android Pie v9 API 28 - [x] Test on Android Oreo v8.1 API 27 - [x] Test on Android Oreo v8.0 API 26 - [x] Test on iPhone 12.1 (with Japanese Kana keyboard) - [x] Test composition events on Chrome Desktop v73 - [x] Test composition on IE11 (I didn't know how to test composition events though) - [x] Unit tests There are 3 ways to try out this PR. Codesandbox: https://3ymzzlj9n5.codesandbox.io/ (uses `draft-js-android-fix-beta.3`) Use the published [draft-js-android-fix](https://www.npmjs.com/package/draft-js-android-fix) package: `yarn install draft-js-android-fix` Note that this package might not be up-to-date, it's hard for me to guarantee I'll always remember to update the package, but I'll do my best. The other way is guaranteed to be up-to-date, but has a longer setup: * run `git clone https://github.com/facebook/draft-js.git` * run `git remote add fabiomcosta https://github.com/fabiomcosta/draft-js.git` * run `git fetch fabiomcosta` * run `git checkout -b attempt_android_fix_with_dom_diff fabiomcosta/attempt_android_fix_with_dom_diff` * run `yarn install` (or use `npm`) * run `open examples/draft-0-10-0/rich/rich.html`, or any other example you'd like to test Pull Request resolved: facebookarchive#2035 Reviewed By: kedromelon Differential Revision: D14568528 Pulled By: claudiopro fbshipit-source-id: 16861de52eca41cd98f884b0aecf034213fc1bd0
tdlr: Draft.js does not work correctly with some combinations of Android keyboards and mobile web browsers.
More details below:
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.
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.
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.
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.
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.
The overall difference in the events which fire compared to other browsers: "Android does not fire onChange for every input event like desktop/iOS 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" Backspacing and deletion of immutable/segmented entities handled incorrectly with some Android keyboards #1066 & "Wrong editorState after deleting (Android)" Wrong editorState after deleting (Android) #1076 & "Deleting composition and starting new one results in extra character appearing" Deleting composition and starting new one results in extra character appearing #1011
Autocorrect can lead to a broken state: "Broken on Android mobile web" Broken on Android mobile web #102 & [Bug] "Android auto suggestion: inserts duplicate characters, hides content" [Bug] Android auto suggestion: inserts duplicate characters, hides content #911 & "auto-correct creates bad state in Android 5.0" auto-correct creates bad state in Android 5.0 #1010 & "[Bug] Android auto suggestion: inserts duplicate characters, hides content" [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" 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 There's input bug in Android keyboard #1224" & "Text gets lost on mobile devices" Text gets lost on mobile devices #1077 & "Draft editor does not take input from mobile keyboards" Draft editor does not take input from mobile keyboards #1380
Repeated words appearing in Firefox on Android: " Reapiting user insert 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 Heads up: Chrome 65 will change composition events on Android #1657"
We will continue periodically to update this list with any new reports.
The text was updated successfully, but these errors were encountered: