Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Text gets lost on mobile devices #1077

Closed
Nikcrysis opened this issue Mar 16, 2017 · 25 comments
Closed

Text gets lost on mobile devices #1077

Nikcrysis opened this issue Mar 16, 2017 · 25 comments

Comments

@Nikcrysis
Copy link

I've used draft-js form and got a feedback from some users, that on mobile devices wrotten text disappears.
Couldnt reproduce it by myself, but however bug appears.

@johnmpotter
Copy link

I've seen a similar issue on both android and ios browsers. I'm hoping #1035 will give us the tools to fix the problem.

@marekolszewski
Copy link

+1

When I visit draftjs.org and type on my Google Pixel each word that I type disappears after I press space.

@schwers-zz
Copy link

Seems to be somewhat keyboard dependent. On the draftjs.org editor using a Google Pixel XL, Android 7.1.1, Chrome 57:

  • GBoard (android default): I can type text, but as soon as I press space the word disappears. However there's a few edge cases with autocomplete. If I use the keyboards word suggestions without typing anything, that text is entered. If I start typing a word, and select an autocorrect/suggestion, the text for the current word that I've entered is removed and a portion of the autocorrection is applied.

  • SwiftKey: I can type a few letters on occasion, but generally the virtual keyboard is dismissed after typing a letter or selecting an autosuggestion.

@emilecantin
Copy link

This bug is present on Facebook's own https://www.messenger.com (you need to select "Request Desktop site" in Chrome's menu)

@emilecantin
Copy link

Looking deeper into this issue, it looks like Chrome with GBoard doesn't do the same thing as every other browser.

There's a 5 year old issue about that on Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=118639 (marked as WontFix in 2014).

Here is a codepen that appends Draft's internal state with every "onChange": http://codepen.io/anon/pen/rmwdxz

Debugging a bit on a real device with it, it looks like Chrome changes the text directly inside the contentEditable element, but sends dummy keyboard events on each keypress.

I think that any fix for this issue will have to look at what was added inside the element directly, instead of trying to catch every single event that could change the text.

@tedmx
Copy link

tedmx commented Jun 9, 2017

if auto-correct is on, word is replaced with a whitespace after pressing spacebar

Doesn't reproduce on older Chromium-based browsers or on older mobile Chrome 54.
Reproduces on newer mobile Chrome 58.
Keyboard-agnostic, reproduces both on GBoard or Samsung Default Keyboard (tested on a Galaxy phone).

In newer Chrome, there are no textInput + input events about the actual word confirmed and inputted.
In older Chrome, these two events are present. After these two events, another pair of textInput + input is fired, now about whitespace being inserted.

So, if we input "orange" with auto-correct, normally we expect:

  • textInput (about word "orange")
  • input
  • textInput (about " ")
  • input

In newer Chrome, first two are not fired.

Draft.js may depend on that. With what it gets, it may decide that only whitespace was inserted, and changes Editor's contents accordingly.


Working idea to solve this it to read data from compositionend event after word is entered (pofigizm@87ccadc). Most probably Chrome's intent is that textinput event duplicated compositionend, and should've been removed.

@georgebonnr
Copy link

georgebonnr commented Aug 5, 2017

@flarnie @pofigizm we're hearing about this bug from our Android users over at Patreon. We can reproduce on newer versions of Chrome (tapping spacebar removes text). Good to know that you're working on it.
What's the plan with pofigizm@87ccadc moving forward? This is a significant issue for our users, so if the fix isn't likely to make it into master how dangerous would it be to point to that fork?

georgebonnr added a commit to Patreon/draft-js that referenced this issue Aug 5, 2017
This duplicates the changes in pofigizm@87ccadc,
which is referenced in this comment facebookarchive#1077 (comment).
Until we get a response to facebookarchive#1077 (comment),
this might be our best option to support our users.
@pofigizm
Copy link
Contributor

pofigizm commented Aug 5, 2017

I didn't work on it.
@tedmx worked with the problem and going to open PR when he has free time. I don't know current status.

@tedmx
Copy link

tedmx commented Aug 5, 2017

Sup everyone, thanks for appreciating effort of @pofigizm's team.

  • Short answer: feel free to get some insight from the repo, but please test it and don't trust it. There are many more issues which immediately crop out. Some may seem to appear because of that very fix.

Initially I thought that there are just a couple of things broken with composition*s on Android. It turns out, one issue immediately brings another to the table.

You fixed this one? Well, here you are, deleting the symbols is not working. Can't blame draft-js, it's the mobile Chrome which doesn't tell a tiny distinguishable thing about backspace key -- you have no clue about the key pressed being backspace -- events have ambigous code (did I press "a"? maybe a number? maybe it was a backspace?), no special event, you have to guess from how DOM is changed. [1]

Okay, imagine we fix that somehow. Then immediately you'll find a bug of that tapping on another word while in composition mode breaks things. Seriously, just tapping on other word.

So the problem with composition on Android is big, not solveable with a couple of glorious PRs with precise fixes. Chrome mobile has changed its APIs for composition* events a couple of times in just preceding month, working with it looks like a guessing game, and you'll have to build a kind of guessing adapter to get even basic stability in that area. No single fix, no fast fix, and that all should go inside 'Chrome on Android' conditional branch in source code.

The file which has to be reworked into the mega-combine is src/component/handlers/composition/DraftEditorCompositionHandler.js.

[1] Just look at that beautiful log of frustration here: https://bugs.chromium.org/p/chromium/issues/detail?id=118639#c260. We're not the only ones, guys!

@emilecantin
Copy link

emilecantin commented Aug 7, 2017 via email

@icd2k3
Copy link

icd2k3 commented Aug 8, 2017

Can repro this in browserstack with Pixel XL and default chrome browser, here's a gif of the behavior (notice after I press spacebar the word disappears):
android

@gillchristian
Copy link

I get the same issue using Chrome Mobile and Google Keyboard on a BLU Vivo 5.

And yes as @tedmx said, many things trigger it so to would be crazy to fix one by one. For what I was able to test: space key, : key, picking a word from predictive suggestions.

@fabiomcosta
Copy link
Contributor

@ashevtcov has a PR fixing this issue, would be nice to have code review and get more support there.
#1500

angkec pushed a commit to AriesApp/draft-js that referenced this issue Jan 8, 2018
angkec pushed a commit to AriesApp/draft-js that referenced this issue Jan 8, 2018
@maxhartshorn
Copy link

@tedmx any update on this issue? @fabiomcosta were you able to get your pull request merged?

@fabiomcosta
Copy link
Contributor

fabiomcosta commented Mar 5, 2018

@maxhartshorn that's not my PR, but it says it's not merged yet.

@SnowDiamond
Copy link

I also encountered this problem. Is it possible to come up with a solution?

@tedmx
Copy link

tedmx commented Apr 5, 2018

@maxhartshorn
My PMs have really put off whole "we want RTE on mobile" to suspension when hearing about scale of the issue, so I have no full alternative code solution now.

Although I already have a huge recommendation to core Draft.js developers: please be flexible — fully parametrize logic from DraftEditorCompositionHandler.js ASAP. Not only it's useless for many cases, it doesn't give developers an option to use anything alternative. Make a parameter for Editor, call it something like customCompositionHandler, let it handle the stuff when present.

While Draft.js is thinking about this, end-developers may fork Draft.js and themselves do that kind of parametrization.

Everyone: when writing custom handler, be prepared for tons of work — this stuff gonna be hard. #1500 looks like 1/20th of work which must be done. Idea: start with hard copy of current DraftEditorCompositionHandler.js (it's still better than going completely from scratch), then gently go from there, fixing an issue after issue.

@julianguyen
Copy link

julianguyen commented Sep 21, 2018

Has this been fixed? I'm still seeing issues.

@YCMitch
Copy link

YCMitch commented Sep 22, 2018

@julianguyen No, unfortunately. It's well over a year on, and nothing seems to have been done here.

If it's never going to be actioned, it'd be great if FB made it a tad more obvious that this doesn't work...

@flarnie
Copy link
Contributor

flarnie commented Oct 14, 2018

Merging this into a general Android bug issue - see #1895

@MichelMerlin
Copy link

MichelMerlin commented Sep 10, 2019

Space bar erases previous input in Android Desktop versions of Twitter et Facebook
I have suffered the same bug for years on my Android 4 ICS (Ice Cream Sandwich), 6 Marshmallow, et 9 Pie.
After a number of tries and tests I found that, in my case at least, the bug systematically existed on facebook AND TWITTER pages in Android, NOT in Windows; when the web page was open in its DESKTOP version, NOT in the MOBILE version; and that no other change would have any influence on it (in particular changing the keyboard, as Samsung keyboard, Google Gboard, etc, or any other settings, brought no change). Only reverting from my habit of systematically requesting the desktop site as soon as arriving on any web page (Android > Chrome > Settings > Desktop site) and remaining on the MOBILE SITE did remove the bug.
Versailles, Tue 10 Sep 2019 12:37:10 +0200, edited (title turned link) 12:40:15

@shamimfahad
Copy link

I'm also facing the same issue in 2021 in android. Whenever I try to send a text without space at the end of line it cuts the last word and I also can't send simple "hi", it changes the word into an empty string

@bryanltobing
Copy link

Having the same issue with @shamimfahad any update or hacky trick to fix this?

@p-christ
Copy link

having the same problem, anyone know how to get around this?

@shamimfahad
Copy link

having the same problem, anyone know how to get around this?

try adding a space at the end of the string if there isn't any before you save it

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests