How do I prevent Element.focus() change cursor position in contenteditable div?

Question

I do not wish to move the cursor, anywhere but when I call the function focus, it moves the cursor to the beginning. I wish to keep the cursor where it is. I am doing this in ReactJS using Typescript.

const element = document.getElementById('editable-div');
element.focus();   // sets cursor to beginning here
// rest of my code is here

I want to call focus because I need to append stuff in the contenteditable div and in some cases insert stuff. But as soon as I do focus(), it moves the cursor at the wrong place. How do I fix this?

Answer 1

With the help of document.createRange and Window.getSelection it is possible

const { useState, useEffect, useRef } = React;

const random = (from, to) => Math.floor(Math.random() * (to - from) + from);
const randomText = () => Array(random(5, 10)).fill(0).map((pr, index) => String.fromCharCode(index + 50)).join('')

const setCaretToTheEnd = (element) => {
  const position = element.textContent.length;
  const [childNode] = element.childNodes;
  const range = document.createRange();
  const selection = window.getSelection();
  range.setStart(childNode, position);
  range.setEnd(childNode, position);
  range.collapse(true);
  selection.removeAllRanges();
  selection.addRange(range);
}

const App = () => {
  const [text, setText] = useState('');
  const inputRef = useRef(null);
  
  useEffect(() => {
    if(inputRef && inputRef.current && text) {
      const element = inputRef.current;
            
      setCaretToTheEnd(element);
      element.focus();
    }
  }, [text]);
  
  useEffect(() => {
    let isUnmounted = false;
    let handle = null;
    
    const changeText = () => {
      setText(randomText());
    
      handle = setTimeout(changeText, 4000);
    }
    
    handle = setTimeout(changeText, 500);
    
    return () => {
      isUnmounted = true;
      clearTimeout(handle);
    }
  }, [])

  const onChange = ({target: {value}}) => setText(value);

  return <div>
    <div ref={inputRef} suppressContentEditableWarning={true} className="contentEditable" onChange={onChange} contentEditable>{text}</div>
  </div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

.contentEditable {
  padding: 1rem;
  border: 1px solid black;
}

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<div id="root"></div>
<script src="https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js"></script>
<div id="root"></div>