Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cursor Jumps around on Mobile #5844

Open
Hawkers opened this issue Apr 5, 2019 · 9 comments
Open

Cursor Jumps around on Mobile #5844

Hawkers opened this issue Apr 5, 2019 · 9 comments

Comments

@Hawkers
Copy link
Contributor

Hawkers commented Apr 5, 2019

Describe the bug
The cursor does not always remain where the user intends.

To Reproduce
Steps to reproduce the behavior:

  1. Open Chrome mobile
  2. Type something at the end of the document
  3. Tap after a word higher in the document and press space
  4. Cursor will jump to end of document

Expected behavior
The cursor should remain in place

** Version information **
OS: Android
Browser: Chrome 73

@Ge-lx
Copy link

Ge-lx commented Mar 27, 2020

  • Android 9 on OnePlus 5T (A5010)
  • Chrome 80.0.3987.149
  • CodeMirror 5.48.4 via EasyMDE v2.8.0

I am also experiencing this bug and it makes for a very bad user experience. From my testing it seems that the editor is not always correctly setting the internal cursor position position (setSelection(doc, sel, options)) when the user taps somewhere in the document.
It works fine, when using the cursor key (via remote debugging) or a mouse to interact with the document. While debugging this I saw, that CodeMirror is listening for touchend events to update the cursor position in response to user input on mobile.

The problem is, that sometimes the touchend event is not fired.
You should be able to see for yourself by registering event listeners like:

window.addEventListener('touchend', () => console.log('touchend'))
window.addEventListener('touchstart', () => console.log('touchstart'))

Some googling led me to this unfixed Chromium bug, which could be causing this issue: When the target element of a touchstart is removed from the DOM while the touch is in progress, no touchend will be fired.

The problem would then be, that CodeMirror removes elements from the DOM, that have been the target of touchstart events, so that the corresponding touchend never fires.

As far as I can tell this is caused by updateDisplayIfNeeded, which is called on touchstart events. A quick and dirty bugfix for this is the following:

src/display/update_display.js:90

function updateDisplayIfNeeded(cm, update) {
  var display = cm.display, doc = cm.cod;
  
  ...
  ...

  // <+++ line=97>
  // Bail out if there is a touch event in progress.
  if (!update.force && cm.activeTouch !== null) {
    return false;
  }
  // </+++>

  ...
  ...
}

In my limited testing I could identify any problems with this approach, but I do not have the knowledge of CodeMirror to test it in every scenario.
In my deployment I will however deploy this fix, as without it the editor is not very usable on Android.

@marijnh
Copy link
Member

marijnh commented Apr 21, 2020

I haven't managed to reproduce this, unfortunately. But going by your analysis, which indicates that the display update is triggered by the touch event handler, would adding a line like if (!d.scroller.contains(e.target)) return after the call to ensurePolled in the event handler help?

(Aborting the touch handling would make the regular mouse events apply for the tap.)

@broxen
Copy link

broxen commented Sep 27, 2021

I'm experiencing this same bug consistently with Codemirror instances in Wiki.js and on the Codemirror demo page, along with the (maybe) related #6145 issues as shown in these videos.

I couldn't get the screen recordings to attach, so the Vimeo links are below demonstrating aspects of the issue.

https://vimeo.com/606720463
https://vimeo.com/606728397

Comment #20 on Chromium Bugtracker suggests that Chromium is working as the spec intends.
https://bugs.chromium.org/p/chromium/issues/detail?id=464579#c20

I don't see this issue with any other editors (such as this GitHub comment editor)

@maplant
Copy link

maplant commented Feb 1, 2022

Bumping this issue as it makes the editing experience on android pretty awful, and I see quite a few people experiencing this

@EgMan
Copy link

EgMan commented Feb 1, 2022

Doesn't seem isolated to Chrome mobile.

I'm also seeing this issue on Android's Firefox mobile browser v96.3.0

@paxter
Copy link

paxter commented Apr 2, 2022

Why this is still not fixed in 2022? It's nearly impossible for some mobile devices to use this software.

@marijnh
Copy link
Member

marijnh commented Apr 3, 2022

Use CodeMirror 6 if you want more robust mobile support. Coming here and complaining is, unless you're paying me to maintain the software, entirely inappropriate.

@paxter
Copy link

paxter commented Apr 3, 2022

Complaining? This was a simple question related to a critical bug which exists for years. If you are not feeling responsible for critical bugs in your software, you better should stop maintaining open source software.
I've written millions lines of code for free and never get paid.

@ChristianGruen
Copy link
Contributor

Complaining? This was a simple question related to a critical bug which exists for years. If you are not feeling responsible for critical bugs in your software, you better should stop maintaining open source software.

All I can say is: Thank you, @marijnh, for creating and maintaining CodeMirror; it’s a splendid and impressive piece of software. As so often, it’s hard to earn rewards when doing things for free.

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

No branches or pull requests

8 participants