onRef set to null in functional component after re-render

[FlorianHockmann]

Environment Details

• react-tabulator version: 0.18.1
• OS: Ubuntu 20.04.4 LTS
• Node.js version: v14.19.1

Long Description Version 0.18.1 changed the ref property to an onRef callback. We use ReactTabulator in a functional component. The callback method I provide to onRef gets called with a valid ref which looks good at first. But then our functional component gets re-rendered which resets the internal ref variable where I stored the ref we got from the callback to null. So, we don't have a valid ref anymore when we try to call a method on it.

Demo with code sandbox

Working version with 0.17.1 which still took a ref: https://codesandbox.io/s/react-tabulator-onref-workingwithref-r8nxd1

and then I tried to update it to 0.18.1 and use onRef instead: https://codesandbox.io/s/react-tabulator-onref-brokenwithonref-i6mwl1

The idea is that I want to handle selection of rows from outside the table. I did this for the simple example with two buttons. If you click them in the working example, then the rows get selected. With onRef this doesn't work however as the TableViewer gets re-rendered which makes the ref null again. That is why instead of selecting a row, the effect logs: tabulator invalid: null.

Workaround

Stay on 0.17.1 apparently.

[RiteshParyali]

I am also facing same issue

[ajc-uconn]

I have the same problem.

[ScottTyson]

I use this design pattern and it seems to work reliably:

const MyFuncComp = () => { const tableRef = React.useRef(null); <ReactTabulator onRef={(r) => (tableRef.current = r.current)} /> }

However, the following does not always work: <ReactTabulator onRef={(r) => (tableRef = r) } />

[ScottTyson]

For what it's worth, the above design pattern works using: "react-tabulator": "^0.18.1", "tabulator-tables": "^5.5.1", HOWEVER, I am getting console errors related to getComponent() calls.

I just updated to using: "react-tabulator": "^0.19.0", "tabulator-tables": "^5.5.2", The console errors are now gone.