1542029 - Range setStartAfter/setEndAfter puts caret before node

Status: RESOLVED DUPLICATE of bug 832731

(Core :: DOM: Editor, defect)

Description

[Danilo B]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

When setting the caret position using range.set(Start|End)After, the cursor is not always set properly.

With this HTML:

<button id="go">Add selection on line 2 right before "b"</button>
<div id="el" contenteditable>a<br>b</div>

And this JS:

document.getElementById("go").addEventListener('click', () => {
const sel = document.getSelection();

// Get or create range
let range, created;
if (sel.rangeCount == 0) {
range = document.createRange();
created = true;
} else {
range = sel.getRangeAt(0);
created = false;
}

// Get DOM references
const el = document.getElementById("el");
const br = el.children[0];

// Add range
range.setStartAfter(br);
range.setEndAfter(br);
if (created) {
sel.addRange(range);
}
el.focus();
});

...when clicking the button, the caret position is on line 1 after the "a", instead of on line 2 before the "b".

Interactive codepen: https://codepen.io/anon/pen/GLZoxO

It works properly in Chromium.

Comment 1

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Thanks for linking the see also bug 832731, Alice0775 White.
Should we duplicate this as that one, Makoto-san?

Comment 2

[Makoto Kato [:m_kato]]

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #1)

Thanks for linking the see also bug 832731, Alice0775 White.
Should we duplicate this as that one, Makoto-san?

Yes, we should be dup of this bug.

Also, this may not editor issue. I guess that nsCaret::GetCaretFrameForNodeOffset returns the frame of end of line.