I have a custom cellRenderer component named CellInput.tsx
const CellInput = () => {
const [localValue, setLocalValue] = useState();
const handleChange = (event) => {
setLocalValue(event.target.value)
}
return (
<input className="input-cell" value={localValue} onChange={handleChange}/>
)
}
This is my ag-grid table Table.tsx
const columnDefs = [
{
headerName: 'ABC',
field: 'abc',
minWidth: 100,
cellRendererFramework: CellInput
}
]
<AgGridTable columnData={columnDefs} rowData={rows} />
This is my test for the ag-grid where I am just debugging & getting the dom tree.
it("should be able to toggle the nif toggle button",async () => {
const { container, debug } = render(<Table.tsx />);
await wait(() => debug())
});
I observed Ag-grid intermittently adding an extra (span+ copy of cellRenderer) after ag-react-container class. Is this something expected ? As I am not able to see it in the Chrome Browser DOM Tree
Below is the screenshot for the debugged result Debug Result
This is happening randomly which is failing snapshot testing. Anyone faced similar issue or Is their anything I am missing here?