JavaScript - getSelection returns incorrect values in Firefox

Question

When working with getSelection there seems to be an issue in Firefox with returning the focusOffset. See this example:

document.querySelector('div').addEventListener('keydown', () => {

  console.log(window.getSelection().focusOffset);

});

console.log('ready');

<div contenteditable="true">Hello world!</div>

<p>How to reproduce: Open in Firefox click on the div and press command/control + a to select all. Try this a few times. All other browsers return the correct value for focusOffset <b>12</b>, Firefox sometimes only returns <b>1</b>.</p>

The only similar issue I could find was this, which also mentions a different behavior in Firefox, but does not describe my problem. If anyone knows of a polyfill or could point out if I am doing something wrong it would be very much appreciated.

Answer 1

I guess it is more problems at once.

Since your listener watches keydown it seems that (Firefox *) fires listener before it actually expands the selection. You can test this if you check actual selection text:

<div contenteditable="true" tabindex="0">Hello world!</div>

<script>
document.querySelector('div').addEventListener('keydown', (e) => {
  const s = window.getSelection();
  const r = s.getRangeAt(0);
  console.log('sfo:', s.focusOffset, 'sao:', s.anchorOffset, 'rso:', r.startOffset, 'reo:', r.endOffset, '»' + s.toString() + '«', e.code);
});

console.log('ready');
</script> 

First invocation in Firefox always sees empty string and focusOffset at initial cursor position and only consecutive keydowns see finished selection:

(Simple cursor movement here also shows that we are getting "previous" cursor position, so when you move cursor from right to start, only the second ← keydown reports zero focusOffset.)

If you change listener to keyup, it starts to get the whole selection the moment you release the A

<div contenteditable="true" tabindex="0">Hello world!</div>

<script>
document.querySelector('div').addEventListener('keyup', (e) => {
  const s = window.getSelection();
  const r = s.getRangeAt(0);
  console.log('sfo:', s.focusOffset, 'sao:', s.anchorOffset, 'rso:', r.startOffset, 'reo:', r.endOffset, '»' + s.toString() + '«', e.code);
});

console.log('ready');
</script> 

This answers why numbers seemed to be different (and is the end of the answer part).

* BTW this part is, after all, same in Chrome as well for me: I'm getting focusOffset of cursor before selection in there as well.

---

Now this it the part where it really stops making any sense in Firefox, and I guess it is a bug: problem is, that now Firefox gives that mysterious offset at index 1 reliably each time after CtrlA:

• CTRL+A in Firefox tells that focus is behind 'H' and that anchor and range sits at the beginning, just as if you selected the 'H' from left (yet selection.toString() is correct):

  sfo: 1 sao: 0 rso: 0 reo: 1 »Hello world!« KeyA

• In Chrome it tells that focus is at the end, anchor at start, rangeStart at start, rangeEnd at end (what makes sense):

  sfo: 12 sao: 0 rso: 0 reo: 12 »Hello world!« KeyA

• Pressing → in Firefox then produces cursor after last character, yet logs that it is effectively after first character:

  sfo: 1 sao: 1 rso: 1 reo: 1 »« ArrowRight

Selecting text with eg. Home, ShiftEnd produces correct outcome in both browsers.

(Sorry for this non-anwser part: feel free to adapt it into question. I have skimmed Bugzilla and found no particular report about this yet.)