[Bug]: AgFillHandle error for groupDisplayType="custom"

Link to reproducible scenario

https://codesandbox.io/p/sandbox/wfmc4z

Describe the bug

Steps to reproduce

1. Configure grid with:

• groupDisplayType="custom" (group rows render individual cells, not a single full-width cell)
• cellSelection={{ handle: { mode: "fill" } }}
• Enough columns that horizontal scrolling is needed

1. Select a cell on a leaf row (non-group row)
2. Drag the fill handle vertically downward, scrolling far enough that the originally selected cell is scrolled out of the horizontal viewport (unmounted by DOM virtualization)
3. Two TypeErrors appear in the console

Actual behaviour Two TypeErrors are thrown: Error 1: TypeError: Cannot read properties of undefined (reading 'toggleCss') File: CellSelectionModule.dynamicBeans.fillHandle.extendVertical at line 37294:24 Code:

const cell = _getCellByPosition2(beans, cellPos);
if (cell) {
  this.markedCells.push(cell);
  const cellComp = cell.comp;
  if (!cellInRange) {
    cellComp.toggleCss("ag-selection-fill-left", i === 0);
    cellComp.toggleCss("ag-selection-fill-right", i === colLen - 1);
  }
  cellComp.toggleCss(
    isMovingUp ? "ag-selection-fill-top" : "ag-selection-fill-bottom",
    _isSameRow3(row, endPosition)

Error 2: TypeError: Cannot read properties of undefined (reading 'toggleCss') File: CellSelectionModule.dynamicBeans.fillHandle.clearMarkedPath at line 37224:12 Code:

for (const cell of this.markedCells) {
  if (!cell.isAlive()) {
    continue;
  }
  const { comp } = cell;
  comp.toggleCss("ag-selection-fill-top", false);
  comp.toggleCss("ag-selection-fill-right", false);
  comp.toggleCss("ag-selection-fill-bottom", false);
  comp.toggleCss("ag-selection-fill-left", false);
}
this.markedCells.length = 0;

Error 1 also poisons state: the cell is pushed to markedCells (line before the crash) but CSS was never applied. Error 2 then fires on cleanup because markedCells.length = 0 is never reached.

Expected behaviour: Fill handle should gracefully skip cells that have no DOM component (cell.comp is undefined). Both extendVertical and clearMarkedPath should guard cell.comp before calling toggleCss.

Suggested fix in extendVertical:

if (cell) {
  const cellComp = cell.comp;
  if (!cellComp) continue;           // skip cells without DOM component
  this.markedCells.push(cell);
  // ... rest of toggleCss calls

Suggested fix in clearMarkedPath:

const { comp } = cell;
if (!comp) continue;                 // skip cells without DOM component
comp.toggleCss(...)

More information

• HARD to replicate at first try (even when I understood logs, and can see the replays, was hard to reproduce! So, if you can't see it at the first try, try a few more time!)
  • The easiest way for me to reproduce was:
  • Select a cell on a leaf row (non-group row)
  • Drag the fill handle vertically downward up to just the cell BEFORE The total row at the bottom, in this way, we keep the scroll automatically while hovering the cells!
• AG Grid version: 35.1.0
• Tested with ag-grid-react on Chrome
• This does NOT reproduce with the default groupDisplayType (full-width group rows); only with "custom" which renders individual cells per column on group rows
• The root cause is that _getCellByPosition2 returns cell controllers for group-row cells that exist in the internal model but whose DOM component has been virtualized out (horizontal scroll moves them out of the rendered viewport)
• In production, this cascades: Error 1 leaves stale entries in markedCells, causing Error 2 on every subsequent fill operation until the grid is re-mounted

Version

35.1.0

Does the issue occur for a specific framework only?

All languages

Is the issue only observable on a specific browser?

All browsers