Selectionは取得するタイミングによっては反応に遅延が起きる

Selectionは難しい

Selectionは難しく、同じ入力によるイベントでも種類によってデータが異なる。
また、setTimeoutやPromiseなどの非同期の仕組みを利用した場合にもデータが変わってしまう。
おのれSelection

環境

macOS 10.14.6
Google Chrome 77

検証1

コード

const hd = e => console.log(e.type, window.getSelection().focusOffset)
el.addEventListener("keydown", hd)
el.addEventListener("keyup", hd)

結果

イベントタイプ	入力したキー	getSelection().focusOffset	期待値
keydown	->	0	1
keyup	->	1	1
keydown	<-	1	0
keyup	<-	0	0

考察

keyupのみ期待値通りになっていた。
なので、keydownからkeyupの間にgetSelectionの値に変化が出ていたであろう。
では、その間にデータが取れればどうなるだろうか。

検証2

コード

el.addEventListener("keydown", e => {
  setTimeout(() => console.log(e.type, window.getSelection().focusOffset), 0)
})
el.addEventListener("keyup", e => console.log(e.type, window.getSelection().focusOffset))

結果

イベントタイプ	入力したキー	getSelection().focusOffset	期待値
keydown	->	1	1
keyup	->	1	1
keydown	<-	0	0
keyup	<-	0	0

見事にkeydownが期待値と一致した。

おわり

setTimeoutで実行を遅延することによって、期待値通りの結果を得られた。
エディタ開発の成功を祈って。