Batch Editing API 0 Bug

.example-wrapper {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    width: 100%;
}

button {
    height: unset !important;
}

.example-button-row {
    display: inline;
    gap: 5px;
    padding-right: 8px;
}

.example-buttons {
    padding-bottom: 8px;
}

.grid-wrapper {
    flex: 1 1 0px;
}

#myGrid {
    height: 100%;
    width: 100%;
}

let gridApi;

const gridOptions = {
  columnDefs: [
    { field: "athlete", minWidth: 120 },
    { field: "age", aggFunc: "avg" },
    { field: "country" },
    { field: "date" },
    { field: "sport", minWidth: 120 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze", minWidth: 100 },
    { field: "total", aggFunc: "sum" },
  ],
  defaultColDef: {
    flex: 1,
    editable: true,
  },
  grandTotalRow: "bottom",
  onRowEditingStarted: (_event) => {
    console.log("rowEditingStarted");
  },
  onRowEditingStopped: (_event) => {
    console.log("rowEditingStopped");
  },
  onCellEditingStarted: (_event) => {
    console.log("cellEditingStarted");
  },
  onCellEditingStopped: (_event) => {
    console.log("cellEditingStopped");
  },
  onCellValueChanged: (_event) => {
    console.log("Cell value changed");
  },
};

function getEditingCells() {
  const cells = gridApi.getEditingCells();
  console.log("Editing cells:", cells);
}

function startBatchEdit() {
  console.log("Starting batch edit");
  gridApi.startBatchEdit();
}

function commitBatchEdit() {
  console.log("Committing batch edit");
  gridApi.commitBatchEdit();
}

function cancelBatchEdit() {
  console.log("Cancelling batch edit");
  gridApi.cancelBatchEdit();
}

function startEdit() {
  gridApi.startEditingCell({
    rowIndex: 0,
    colKey: "athlete",
  });
}

function cancelEdit() {
  gridApi.stopEditing(true);
}

function stopEdit() {
  gridApi.stopEditing();
}

// setup the grid after the page has finished loading
document.addEventListener("DOMContentLoaded", function () {
  const gridDiv = document.querySelector("#myGrid");
  gridApi = agGrid.createGrid(gridDiv, gridOptions);

  fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
    .then((response) => response.json())
    .then((data) => gridApi.setGridOption("rowData", data));
});

<!doctype html>
<html lang="en">
  <head>
    <title>JavaScript Example - Cell Editing Batch - Batch Editing Api</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&amp;display=swap"
      rel="stylesheet"
    />
    <style media="only screen">
      :root,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
      }

      html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
        font-family: -apple-system, "system-ui", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
          "Noto Color Emoji";
      }

      body {
        padding: 16px;
        overflow: auto;
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <div class="example-wrapper">
      <div class="example-buttons">
        <div class="example-button-row">
          <button onclick="startBatchEdit()">Start Batch Edit</button>
          <button onclick="commitBatchEdit()">Commit Batch Edit</button>
          <button onclick="cancelBatchEdit()">Cancel Batch Edit</button>
        </div>
        <div class="example-button-row">
          <button onclick="startEdit()">Start Edit</button>
          <button onclick="stopEdit()">Stop Edit</button>
          <button onclick="cancelEdit()">Cancel Edit</button>
        </div>
        <div class="example-button-row">
          <button onclick="getEditingCells()">Get Editing Cells</button>
        </div>
      </div>
      <div class="grid-wrapper">
        <div id="myGrid"></div>
      </div>
    </div>
    <script>
      (function () {
        const appLocation = "";

        window.__basePath = appLocation;
      })();
    </script>
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@34.2.0/dist/ag-grid-enterprise.min.js?t=1757495020203"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" href="styles.css" />
  </body>
</html>

{
  "name": "ag-grid-example",
  "dependencies": {
    "ag-grid-community": "34.1.2",
    "ag-grid-enterprise": "34.1.2"
  },
  "devDependencies": {
    "@types/node": "^22"
  }
}