Uncaught TypeError: Cannot read properties of null (reading 'querySelector')

Tags: #<Tag:0x00007efc728160d0>
#1

I am generating Handsontable instance on button click and placing it in a <div /> with ref.current .
I am applying merging and border design dynamically but when I drag mouse over Column headers, I get the warning :

Uncaught TypeError: Cannot read properties of null (reading ‘querySelector’)
at overlayContainsElement (element.mjs:233:1)
at MasterTable.getCoords (table.mjs:775:1)
at ManualColumnResize.setupHandlePosition (manualColumnResize.mjs:287:1)
at ManualColumnResize.onMouseOver (manualColumnResize.mjs:455:1)
at HTMLDivElement. (manualColumnResize.mjs:646:1)
at HTMLDivElement.callbackProxy (eventManager.mjs:61:1)

this is how I am creating Handsontable instance

new Handsontable(varianceDivRef.current[index], {
width: “100%”,
height: “auto”,
stretchH: “all”,
data: varianceData[index].grid_data_full,
fixedColumnsLeft: 7,
rowHeaders: true,
colHeaders: true,
manualColumnResize: true,
manualRowMove: true,
mergeCells: mergeVariance,
hiddenColumns: {
columns: [0, 1],
},
colWidths: (index: number) => {
return index === 6 || index === 3 ? 100 : index === 2 ? 200 : 70;
},
cells: () => {
var cellProperties: CellMeta = {
readOnly: true,
};
cellProperties.renderer = cellFormatingRenderer; // uses lookup map
return cellProperties;
},
customBorders: borderVariance,
licenseKey: “non-commercial-and-evaluation”, // for non-commercial use only
});

#2

Hi @jamshaidbutt055

Can you please create a demo showing the issue? There’s not enough information in the code you sent to determine where the problem could be.

#3

click button it will generate Grid.
first time it will work fine.
click on button again. this will clear div and regenerate Grid.
Then bring the mouse over colum headers (i.e. A, B, C, D …)

https://codesandbox.io/s/cocky-gauss-q72gz6?file=/src/hottable.tsx

#4

Hi @jamshaidbutt055

Thank you. I think the problem might be that the instance isn’t destroyed before being created again. We have this method: https://handsontable.com/docs/react-data-grid/api/core/#destroy You can try to use it in a conditional statement while checking if the instance exists or not.

1 Like
#5

Thank you very much. at first, I got some other exceptions after implementing instance.destory() but then It seems to be fixed after reloading.

#6

Hi @jamshaidbutt055

Great to hear that it worked for you. I’m closing this topic.

#7