Cannot read properties of null (reading 'onWheel')

[savaparoski]

Versions
React - 18.2.0
fixed-data-table-2 - ^1.2.11

Code

import React from 'react'
import { Cell, Column, Table as FixedTable } from 'fixed-data-table-2'
import 'fixed-data-table-2/dist/fixed-data-table.css'

export default function Table(): JSX.Element {
  const rows = [0, 1, 2]

  return (
    <FixedTable
      rowHeight={50}
      rowsCount={rows.length}
      width={1500}
      height={800}
      headerHeight={50}
    >
      <Column
        header={<Cell>Col 1</Cell>}
        cell={<Cell>Column 1</Cell>}
        width={1000}
      />
    </FixedTable>
  )
}

Error
FixedDataTable.js:596 Uncaught TypeError: Cannot read properties of null (reading 'onWheel')

[pradeepnschrodinger]

Thanks for reporting. Unfortunately I can't seem to reproduce this with the snippet on codesandbox.

Could you add more information here?
What're the exact steps to reproduce this? Are you using touchpad or a mouse?
Could you also mention the browser version and OS?

[savaparoski]

Here is the repo
I tried this repo on macOS 12, Windows 10, Ubuntu 22, positive its not due environment

[pradeepnschrodinger]

@savaparoski , thanks a lot for the repo. I can reproduce it now.

The issue comes from turning on React's StrictMode, which runs the lifecycle methods in FixedDataTable component twice.

I believe this can only be seen in strict mode as of now, but this might also become a problem with later versions of React, where our same table instance might be mounted/unmounted multiple times.

I can put up a PR to properly initialize and cleanup the mouse/touch handlers, which should prevent the NPE mentioned here.

[mrtnbroder]

can we get this merged?

[pradeepnschrodinger]

Thanks for the ping.

@savaparoski , @mrtnbroder, the fix is now available on v1.2.12 and above.
I'm closing off the issue, but feel free to comment/reopen if you guys face any related issues or have questions.

[savaparoski]

Sounds good, thanks