Why your snippet works but your app doesn't:
In your Stack Snippet, the focus happens during initial page load (which browsers sometimes treat as "user-initiated"), but in your real app, the focus occurs after a user action (like clicking "edit"), and React's useEffect delays it just enough for the browser to consider it non-user-driven.

The fix
Force the browser to treat focus as user-driven by focusing synchronously within the user's click event (not in useEffect).

const EditableCell = () => {
  const inputRef = useRef(null);

  const handleEditStart = (e) => {
    inputRef.current?.focus();
  };

  return (
    <td onClick={handleEditStart}>
      <div 
        ref={inputRef}
        role="listbox"
        tabIndex="0"
        className="focusable"
      >
        Content
      </div>
    </td>
  );
};