Range and Type errors when holding backspace key on Android devices

[sergeichestakov]

Hey Marijn!

Found another pretty nasty bug related to backspacing on Android. While the original issue I brought up a while back (#602) was fixed in version 0.19.28 of CM view, it seems a regression was introduced in 0.19.30. This commit, in particular, seems to be the most likely culprit.

The particular error we're seeing the most is the Position X out of range for changeset of length Y thrown here, although there are other errors thrown related to index out of bounds / undefined node errors such as Mismatched changeset lengths and Cannot read properties of undefined (reading 'length'), but those all seem to be symptoms of the same problem and stem from this call to this.flush() in a requestAnimationFrame callback in CM view.

My working theory is that by the time the requestAnimationFrame callback runs (which only occurs on Android devices), the DOM node and its contents have changed and the offsets that these internal state functions are working with are stale (which leads to index out of bounds errors and undefined nodes being referenced) since the user may be typing/deleting characters quickly.

I've recorded a repro here on my Samsung Galaxy S10+ (although any Android device should do) along with the errors logged in the console (using Chrome Android remote debugging to view) when holding down backspace in the official screenrecorder example:

In addition to throwing an error, this causes the document's text to end up in a mangled state and the cursor to be misplaced outside the document which leads to some strange UX.

[marijnh]

Which virtual keyboard is this? I've been trying to reproduce with GBoard but not seeing this. Could it be that codemirror/view@3221897 helps?

[sergeichestakov]

No, I've confirmed that this occurs in the latest published version unfortunately (0.19.44) which includes that commit 😕

The example I shared above is reproduced with GBoard. When I use Samsung's built in keyboard, I don't see any of those errors (in fact, no errors get thrown), but I do get some weird behaviors related to the cursor jumping a few positions to the left when holding backspace (and pressing nothing else) starting from the end of the document:

This is still a bug, but is less concerning than the RangeErrors thrown when I'm using GBoard. It also almost certainly seems related to the requestAnimationFrame hack mentioned. My hunch is that, when holding backspace, there can sometimes be a race in which two deletes are processed before the first requestAnimationFrame runs to completion (in other words, there's no guarantee two delete events that occur back to back are processed one after the other since a new delete keydown event may arrive before the next repaint when the requestAnimationFrame cb gets called).

[RayZik]

Hi! I had the same problem. Now I updated to 0.19.44 and the problem has gone🙂
https://drive.google.com/file/d/1bYKoZGFJV6qz-swEXKXKWq7topvmncNC/view?usp=sharing

There are some display problems but it does not affect on code. I will test it more today.

[sergeichestakov]

Looks like that commit helped!