JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editor" contenteditable="true">
  <div>
    Editable text
  </div>
  <div>
    (press down arrow to move focus to buttons, and observe what happens to selection in console logs; for webkit the range gets cleared but this does not happen for other browsers)
  </div>
</div>
<button id="button1">
  Button
</button>
<button id="button2">
  Button
</button>
<button id="button3">
  Button
</button>

CSS

#editor {
  margin-bottom: 10px;
}

JavaScript

document.getElementById("editor").addEventListener("keydown", e => {
  if (e.keyCode === 40) {
    console.log(document.getSelection());
    document.getElementById("button1").focus();
  }
});

document.getElementById("button1").addEventListener("focus", () => console.log(document.getSelection()));
document.getElementById("button2").addEventListener("focus", () => console.log(document.getSelection()));
document.getElementById("button3").addEventListener("focus", () => console.log(document.getSelection()));