Issue metadata
Sign in to add a comment
|
The 'selectionchange' event is sometimes not fired before 'backspace' press inside contenteditable on Android
Reported by
k.krz...@cksource.com,
Jul 6
|
||||||||||||||||||||||
Issue descriptionSteps to reproduce the problem: 1. Create 'contenteditable="true"' element with some content like `<h2>Header 1</h2><p>Paragraph 1</p>`. 2. Create selection which will span over multiple (at least two) block elements. 3. Press 'backspace'. It can be reproduced on https://codepen.io/f1ames/pen/mKZzRY?editors=1010 What is the expected behavior? The normal events sequence is: 1. `selectionchange` 1. `keydown` 1. some other events What went wrong? In some cases which seems quite random, `selectionchange` before `keydown` event is not fired, so it looks like: 1. `keydown` 1. some other events Also I have attached two '.gif' files which were recorded simultaneously - one showing tablet devices and the other one debug view on desktop (with logged events). Did this work before? Yes Chrome 67.0.3396.87 on Android 6.0.1 (wasn't able to check on Android 7.x) Does this work in other browsers? N/A Chrome version: 67.0.3396.99 Channel: stable OS Version: Chrome 67.0.3396.87 / Android 8.0.0; CMR-W09 Flash Version: It is a serious issue when you have a code which relays on those events. If selection change is fired before `keydown` the code can act accordingly and then on `keydown` it operates on latest selection (which was fetched form `selectionchange` event). Without first `selectionchange` event, the selection state desynchronises which may lead to unexpected results. We have encounter it while working on typing improvements in CKEditor 5 on Android - see https://github.com/ckeditor/ckeditor5/issues/1127.
,
Jul 6
,
Jul 10
Please use "beforeInput" event[1] instead of keydown. There are no guarantees about event sequence with Keyboard events from IME. Also, in Android IME framework, the button looks like "Backspace" doesn't sometimes generate keyboard event since keyboard apps uses different API to remove contents. [1] https://www.w3.org/TR/input-events-2/
,
Jul 10
Thanks for the details. We're aware of the fact that Android IME makes it impossible for you to fire keydown events with keyCodes. However, I think that we never saw keydown not being fired at all. Am, I right @k.krzton? Does it happen only with some types of Android keyboards, @yosin? Another thing is the order of events – I understand that Android IME works by applying high-level operations to the edited content. Does it also mean that the browser is not able to translate that into a consistent order of selectionchange and keydown? It's unnatural if keydown is fired after selectionchange. If you kinda "mock" this event, can't you mock it earlier? Finally, I thought that beforeInput is still not available on Android, but maybe we checked it too long time ago. I had quite good results when working on https://github.com/w3c/editing/issues/149 initially so we'll see. Thanks for the tips.
,
Jul 10
Yes, I have never seen `keydown` not being fired at all, but I didn't tested different keyboards than the default ones so maybe that's the case (still I assume custom keyboards may results in many different/strange behaviours). As for `beforeinput` it looks like it is not available on Chrome `67.0.3396.87` on Android `6.0.1` (tested on https://dvcs.w3.org/hg/d4e/raw-file/tip/key-event-test.html). @yosin is there any specific version of Android from which `beforeinput` should work? > There are no guarantees about event sequence with Keyboard events from IME. @yosin, so the order of event like `key*` is not guaranteed, but for `input` and `beforeinput` (if it's there) you can always expect to have consistent order, is that right?
,
Jul 10
AFAIK, GBoard (Google keyboard) and some CJK keyboards don't dispatch "keydown" for Backspace. For CJK keyboards, during text composition, keyboard events are vary in each implementation and unpredictable. "beforeinput" was implemented on April 2016[1]. I'm not sure exact version. It seems at least Chrome 53, released on August 30, 2016. https://dvcs.w3.org/hg/d4e/raw-file/tip/key-event-test.html has a bug to support "beforeinput", please change |function init()| as below: function init() { ... addEventListener(input, "textinput", onTextInput); // For IE9 addEventListener(input, "beforeInput", onBeforeInput); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~beforeinput // "Input" -> "input" addEventListener(input, "input", onInput); ... } >for `input` and `beforeinput` (if it's there) you can always expect to have consistent order, is that right? Yes. "beforeinput" is always dispatched before "input". Note: "beforeinput" is dispatched before "compositionupdate". [1] http://crbug.com/585875 Support for Input Events
,
Jul 10
Thanks for clarification @yosin! Yes, I have noticed there is `beforeInput` instead of `beforeinput` in https://dvcs.w3.org/hg/d4e/raw-file/tip/key-event-test.html after posting my comment and retested it on https://jsfiddle.net/f1ames/gLce925n/ - now I can see there is indeed `beforeinput` event fired. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by pkoszuli...@gmail.com
, Jul 6