Cannot read properties of null (reading 'view') when table is unhidden by changing display: none -> block about handsontable HOT 9 OPEN

@ottosson

I'll investigate it further and try to find the source of the issue. I'll keep you updated.

from handsontable.

Hi @ottosson

Thank you for reporting this. Can you please share more details about your implementation? Do you only hide the tables visually without destroying and re-initializing the instance?

from handsontable.

Yes exactly.

I keep all of the tables in the DOM and never destroy them, just hide/unhide them when needed.

Not sure what else to add. I'll see if I can scale back the application to a minimal reproduction of the issue at some point.

from handsontable.

@ottosson

That would be great, as I tried a few scenarios and can't reproduce the issue properly.

from handsontable.

I couldn't let this go so here is a minimal reproduction:
https://stackblitz.com/edit/vitejs-vite-wvxyw3?file=src%2FApp.tsx

I'm sure the approach is a bit unorthodox. Let me know if it can be improved.

from handsontable.

@ottosson

Thank you for the example. I've reviewed it, but so far, I can't find the source for this issue. It's hard to replicate with a React wrapper, but with some trickery, I was able to make it work with hide/show management without the error. Here's an example as a point of reference that, in general, it should work: https://jsfiddle.net/handsoncode/Lcwnzoa8/.

In your case, without the React wrapper, it's more complicated. This might be due to state handling, but it needs more investigation. Also, I noticed that you are destroying the instance and not only visually hiding/showing the table.

from handsontable.

Thanks. I checked your example and it creates multiple instances of the table when clicking hide/show a couple of times.

Also, I noticed that you are destroying the instance and not only visually hiding/showing the table

Yes that seems like something I might have done to handle the double render in strict mode.

from handsontable.

It was a long time since I wrote the original implementation and it's not how I would have approached it today. So I switched to using a boolean useRef to check if the component has been initialized and return early if that's the case. Now I don't have to destroy the table on component unmount.

It solves my issue but the underlying bug is still there I guess.

from handsontable.

Hi @ottosson

After further investigation I'm still not able to find the exact source, but it seems that it's somehow connected to destroying and rebuilding the instance.

If we just use state to manage the table's visibility the problem isn't present: https://stackblitz.com/edit/vitejs-vite-wwhgef?file=src%2FApp.jsx&terminal=dev Maybe that would be a better approach to this requirement until we find the reason for this issue.

In this example we used our React wrapper, but the solution is universal and should also work with your approach.

from handsontable.