input-cursor-lossing-solution.jsx

import React, { useState, useRef, useEffect } from "react";

/**
 * Solution: fix controlled input cursor lossing
 * https://github.com/facebook/react/issues/955
 */
export default function App() {
  const inputRef = useRef();
  const [value, setValue] = useState("12345678");
  const [selection, setSelection] = useState({
    start: value.length,
    end: value.length
  });
  const [insertFlag, setInsertFlag] = useState(1);
  const maxLength = 8;

  const onChange = (e) => {
    let newValue = e.target.value;
    const start = inputRef.current.selectionStart;
    const end = inputRef.current.selectionEnd;

    if (newValue.length > maxLength && value.length === maxLength) {
      const len = newValue.length - value.length;
      // do noting
      setSelection({ start: start - len, end: end - len });
      setInsertFlag(insertFlag + 1);
    } else {
      setValue(newValue);
    }
  };

  useEffect(() => {
    inputRef.current.selectionStart = selection.start;
    inputRef.current.selectionEnd = selection.end;
  }, [insertFlag]);

  return (
    <div className="App">
      <input ref={inputRef} value={value} onChange={onChange} />
    </div>
  );
}