When contentEditable is set to true, only the element that is focused can be selected. I'm trying to make cells that function like they do in excel. I'd like to be able to edit the cell on a single click, otherwise I would just set contentEditable with state and select them as regular div elements. I thought about doing something with onMouseOut to change the state to false, but thet doesn't seem to work.

App component:

import { useState, useRef, useEffect } from "react";
import Cell from "./Cell";

export default function App() {
  const testRef = useRef();
  const [st, setSt] = useState(false);

  useEffect(() => {
    if (st) testRef.current.focus();
  }, [st]);

  return (
    <div style={{ display: "flex" }}>
      <Cell tabindex="1" />
      <Cell tabindex="2" />
      <Cell tabindex="3" />
    </div>
  );
}

Cell component:

import "./styles.css";
import { useState, useRef, useEffect } from "react";

export default function Cell() {
  const [editing, setEditing] = useState(true);

  const testRef = useRef();

  const stopEditing = () => setEditing(false);
  const startEditing = () => setEditing(true);
  return (
    <div>
      <div
        ref={testRef}
        contentEditable={editing}
        // onBlur={stopEditing}
        // onMouseUp={stopEditing}
        onMouseOver={startEditing}
        style={{
          display: "flex",
          border: "1px solid #696969",
          width: "100px",
          height: "25px",
          cursor: "cell",
          margin: "2px"
        }}
      ></div>
      <p>{editing.toString()}</p>
    </div>
  );
}

https://codesandbox.io/s/unruffled-rain-i0v40g?file=/src/Cell.js:0-734