incorrect cursor position on wrapped lines for some users with Chrome

[jdleesmiller]

We've had several reports of the cursor not appearing in the right place on wrapped lines in Chrome (as evidenced by inserts / deletes happening elsewhere). I still can't reproduce these issues, but now one of our users has submitted screenshots illustrating it on the CodeMirror b-tree demo, which may be of some help.

Unlike #1219, the string doesn't have any non-ASCII characters. It's just:

Interpolants are logical assertions over program states that can separate program states that satisfy a desired propert from one that violate the property.\

Unlike #1353, it only seems to affect some users -- and never me, so far.

The first screenshot shows the apparent position of the cursor, after 'y' in 'satisfy':

The second screenshot shows the result of pressing backspace:

The expected result was that the 'y' would be deleted, but the 'f' before the 'y' was deleted instead.

The information I have collected from users so far:

1. This user reported the problem on Chrome stable on Windows 7. The user does not think he has any browser extensions installed. The problem does not appear in Firefox.
2. It affects both inserts and deletes. It does not matter how you position the cursor (mouse or keyboard arrows).
3. It is not always off by one -- it sometimes deletes a character several characters behind the apparent cursor position.
4. The first display line of text (before the wrap) does not have the problem.

I thought it might be related to the user's locale, but I could not reproduce the issue on a French Windows 7 (up-to-date SP1) running a French Chrome (27.0), which matches this user's setup, so that does not appear to be the case.

I'll keep trying to get more information about this from the users who report it -- I'm sorry that there's not much to go on yet, but I figured I'd report it here to see whether anyone has any ideas.

[hsk81]

+1 I've observed the same issue: On FF everything is fine, but on Chrome (more specific: Chromium on a 64 bit Linux machine) the cursor is off by one ore more characters if the line is wrapped.

[marijnh]

Which version of Chrome is this? It looks like https://code.google.com/p/chromium/issues/detail?id=246127 , which I reported but they didn't manage to fix in 28. If 27 (which is the current stable version) is also affected, that would be good to know.

In any case, feel free to pile on the chromium bug report in an attempt to get them to fix this in 28 at least.

[hsk81]

Chromium 28.0.1500.52 (Developer Build 207119)
OS Linux
Blink 537.36 (Unknown URL@0)
JavaScript V8 3.18.5.8
Flash 11.2 r202
User Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.52 Safari/537.36
Command Line /usr/lib/chromium/chromium --flag-switches-begin --enable-sync-favicons --sync-keystore-encryption --flag-switches-end

[marijnh]

Okay, 28, which is a beta if I understand correctly. I'm going to hope that someone in the Chromium team wakes up soon enough to prevent this from making it into the stable release. Even if that fails, I'm pessimistic about being able to fix this on the CodeMirror side.

[jdleesmiller]

Many thanks for your help with this. I have voted for the Chromium bug.

We've had users report this on
Version 28.0.1500.52 Ubuntu 13.04 (28.0.1500.52-0ubuntu1.13.04.2)
Version 28.0.1500.63 m on Windows 7 (but 27 is still the stable version on Windows acccording to http://www.chromium.org/developers/calendar)

[nalanj]

I'm able to reproduce this on Chrome 28 on Mac, if anyone needs help troubleshooting.

[sthomp]

Seeing this issue on Chrome 28.0.1500.71 on OSX.

[marijnh]

The next Chrome 28 update should fix this (at least, that's what they promised in the Chrome issue discussion). I am not sure when it will come out (and whether it will actually work) yet.

[jdleesmiller]

I've checked it in 28.0.1500.95, which hit stable today, on Mac and Windows, and it now seems to be fixed.

[mattpass]

Can confirm this works too.

Test:
Had 28.0.1500.72m, had this bug.
Updated Chrome to latest version (28.0.1500.95).
Visited exactly the same line & position where bug occurred and now works fine.

Hooray!! 👍

[mikemorris]

Confirming that this has been fixed as of Chrome stable 28.0.1500.95
https://code.google.com/p/chromium/issues/detail?id=246127

[marijnh]

Great. I'll leave this open for a few more weeks until the majority of Chrome users have upgraded.

[malayhm]

Chrome 29 is released today and the issued is fixed from chrome side.

[jasonsanjose]

I could still reproduce something similar in Chrome 29 and Canary 31, see #1787.

[androidadvocate]

Hi this issue is still happening and it's now 2015.

[samueleaton]

Triggering a resize event whenever I wanted the cursor to go to the correct position worked for me: window.dispatchEvent(new Event('resize'));

[marijnh]

You can also call .setSize() (without arguments) on the editor. Note that this is only necessary if your code (or some CSS reflow not caused by a window resize) somehow changed the layout or size of the editor.

[danielo515]

I'm still suffering this issue.

I have tried with refresh and triggering a resize event and nothing works.

Any other solution?

[marijnh]

Submit a self-contained demo that makes it easy for me to reproduce this, and I'll look into it (mention browser version etc)

[danielo515]

I'm using it along with other libraries. Should I include them in the demo as well ?

[marijnh]

Only if they are necessary to cause the problem to happen.

[danielo515]

Hello @marijnh

Let me know if this is too complex

http://tiddlywiki.com/plugins/tiddlywiki/codemirror/index.html

• On the lorem ipsum "window" click on show preview
• Click on the arrob at the very top right:
  
• Put the cursor at the end of line one, and move it.

Regards

[marijnh]

You don't appear to be calling refresh() after resizing the editor. If I do so manually from the dev console, things work fine again.

[danielo515]

Hello @marijnh,

I'm not sure of the refresh() on that particular example, but I'm sure that in the other place where I'm using code-mirror I am triggering the refresh.

Let me build an example and I'll post it here.

[gonzalezi2]

I think this might be a related example but I am getting the cursor jumping as well.

Chrome 49.0.2623.112 m

Here's a video of it in action.

https://www.youtube.com/watch?v=6VLSZdoeSQ0

[marijnh]

Does a call to .refresh() solve it? If so, could it be that you resized/showed the editor without notifying it at some point before the issue appears?

[peterrobinson]

I am still having what seems a related problem in 2017. You can see this at http://www.textualcommunities.org/app/community/?id=57598982b952f25827bd401c&route=view
(Press the 'view' button to see the text and input at lower right)
Type fast anywhere in the text input window at lower right and the cursor leaps to the start of the text and goes on from there. Why? I have linewrap on -- turning it off does not help
I am using Chrome Version 56.0.2924.87 (64-bit) on a Macbook pro with Sierra 10.12

[marijnh]

Your cursor is being reset to the start of document somehow. This has nothing to do with this issue. It's likely something that your code does, but if you can reproduce it in a plain CodeMirror, feel free to open another issue.

[trevorhreed]

For anyone else who comes across this...

Had a problem with this. I think it has to do with the way I lay everything out and the code mirror container changing sizes when I set the value. If I use the following code, it resolves the issue:

var editor = CodeMirror.fromTextArea(...)
editor.on('change', () => {
  setTimeout(() => {
    editor.refresh()
  })
})
editor.setValue(...)

[apbarrero]

I can reproduce the issue in Chrome 76+, and none of the hacks above, either calling refresh or changing CSS for word-break: break-word have worked for me.

It worked fine in Chrome 74 (didn't try 75).

[davidhadas]

I encountered the same problem with Chrome 87

After trying out different solutions - the below solved it for me:

myCodeMirror.on("mousedown", function () {
                myCodeMirror.refresh()
});

the solution suggested above with setTimeout did not work....!