1530921 - Selection object renders invalid positions on elements attributed with usereditable

Status: UNCONFIRMED

(Core :: DOM: Selection, defect, P3)

Description

[Axel]

The global Selection object (acquired by window.getSelection()) randomly returns false values for anchorNode and anchorOffset when used on this markup:

<div>
  <pre><code contenteditable="true" spellcheck="false">- type your code here -</code></pre>
</div>

This is particularly true when the user hits the <kbd>RETURN</kbd> key to add new-lines to the above <code> element on the web page.

Here's the corresponding JavaScript (snippet):

const code = document.getElementsByTagName("code")[0];

code.addEventListener("keyup", function (evnt: KeyboardEvent)
{
  const sel = window.getSelection();

  console.log(`Source anchor node: ${sel.anchorNode.nodeName} (${sel.anchorOffset})`);
});

Usually, anchorNode yields a text node and the corresponding anchorOffset is the character offset within that node. But randomly anchorNode yields the code element itself and some random (false) anchorOffset value.

Comment 1

[alex.neblett]

Guys,

This is happening because the way that range and selection in Chrome and Edge is different. (As a side, soon Edge will use the Chromium engine.)

Both Chrome and Safari change the selection in the selection object and the range in the range object to what they determine is the visible area. This change was made a few years ago when they shared a common webkit codebase.

I would suggest that in the interest of promoting standard behaviour between browsers that we follow their lead. Having written more than a few html editors in my day, I can tell you that it would result in better quality and less code.

Cheers,

Alex