ContextMenu opens for wrong row after scrolling

[Azrideus]

• what edition are you using - community / enterprise same
  • version for @inovua/reactdatagrid-community or @inovua/reactdatagrid-enterprise - 5.7.0

Relevant code or config https://codesandbox.io/s/stupefied-panna-9sr4l9?file=/src/App.js

What you did:

1. Select the first item in the grid
2. Scroll to bottom
3. try to open context menu of any item
4. context menu for the wrong row opens

What happened:

https://github.com/inovua/reactdatagrid/assets/22293394/0ee535fc-17d7-4a07-b9fa-a93ba89a272b

Reproduction : https://codesandbox.io/s/stupefied-panna-9sr4l9?file=/src/App.js

[georgiosd]

Also affected by this, even on the latest 5.10.2 community.

Anyone found a workaround? I did try disabling updateMenuPositionOnColumnsChange to no avail.

[georgiosd]

What is interesting and fascinating is that the context menu example breaks down if you edit the code:

import React from 'react'
import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import flags from './flags'

const gridStyle = { minHeight: 550 };

const columns = [
  { name: 'id', header: 'Id', defaultVisible: false, defaultWidth: 80, type: 'number' },
  { name: 'name', header: 'Name', defaultFlex: 1 },
  { name: 'country', header: 'Country', defaultFlex: 1,
    render: ({ value })=> flags[value]? flags[value] : value
  },
  { name: 'city', header: 'City', defaultFlex: 1 },
  { name: 'age', header: 'Age', defaultFlex: 1, type: 'number' }
];

const people = [
  { id: 1, name: '1' },
  { id: 2, name: '1' },
  { id: 3, name: '1' },
  { id: 4, name: '1' },
  { id: 5, name: '1' },
  { id: 6, name: '1' },
  { id: 7, name: '1' },
  { id: 8, name: '1' },
  { id: 9, name: '1' },
  { id: 10, name: '1' },
  { id: 11, name: '1' },
  { id: 12, name: '1' },
  { id: 13, name: '1' },
  { id: 14, name: '1' },
  { id: 15, name: '1' },
  { id: 16, name: '1' },
  { id: 17, name: '1' },
  { id: 18, name: '1' },
  { id: 19, name: '1' },
  { id: 20, name: '1' },
  { id: 21, name: '1' },
  { id: 22, name: '1' },
  { id: 23, name: '1' },
  { id: 24, name: '1' },
  { id: 25, name: '1' },
  { id: 26, name: '1' },
  { id: 27, name: '1' },
  { id: 28, name: '1' },
]

const App = () => {
  const renderRowContextMenu = (menuProps, { rowProps, cellProps }) => {
    menuProps.autoDismiss = true
    menuProps.items = [
      {
        label: 'Row ' + rowProps.rowIndex
      }
    ]
  }

  return (
    <div>
      <h3>Grid with row context menu</h3>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        renderRowContextMenu={renderRowContextMenu}
        updateMenuPositionOnColumnsChange={false}
        columns={columns}
        dataSource={people}
      />
    </div>
  );
}

export default () => <App />

Right clicking on items give you pretty much random values after a while.

I am also seeing issues when the grid height is larger than the viewport - the behavior is strange:

• Scroll to bottom row + right click
• Nothing happens
• Scroll up
• Menu appears at random location at the top half of the grid

Something is really off here