Datagrid has trouble maintaining orderly focus when cells render focusable elements

[yurigenin]

• what edition are you using - enterprise
• version - latest

Relevant code or config

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

import flags from './flags'

const gridStyle = { maxHeight: 207 }

const columns = [
  { name: 'firstName', header: 'First Name', defaultFlex: 1 },
  {
    id: 'fullName',
    header: 'Full Name',
    minWidth: 100,
    defaultFlex: 1,
    render: ({ data }) => {   
      return <input value={data.firstName + ' ' + data.lastName}  />;
    }
  },
]

const dataSource = [
  { firstName: 'John', lastName: 'Grayner', country: 'usa', age: 35, id: 0 },
  { firstName: 'Mary', lastName: 'Stones', country: 'ca', age: 25, id: 1 },
  { firstName: 'Robert', lastName: 'Fil', country: 'uk', age: 27, id: 2 },
  { firstName: 'Mark', lastName: 'Twain', country: 'usa', age: 74, id: 3 },
  { firstName: 'Eric', lastName: 'White', country: 'usa', age: 74, id: 4 },
  { firstName: 'Elaine', lastName: 'Black', country: 'usa', age: 74, id: 5 },
  { firstName: 'Martha', lastName: 'Brown', country: 'usa', age: 74, id: 6 },
  { firstName: 'Blake', lastName: 'Red', country: 'usa', age: 74, id: 7 }
]

export default () => <ReactDataGrid
  idProperty="id"
  columns={columns}
  dataSource={dataSource}
  style={gridStyle}
/>

What happened:

When cells in the grid render focusable elements and not all rows are visible tabbing through focusable elements breaks down as grid scrolls down to reveal invisible rows.

To reproduce:

1. Use the example above.
2. Click on the first cell of the first row.
3. Start 'Tab'-ing through focusable elements - focus will start going through input elements
4. But after the 5th row the focus will never reach the 6th row's input element

This is just one of the patterns I noticed. There are others where focus jumps to random rows instead of following the order of input element in the grid.