A formatter element rendered within the grid with a `tabIndex=0` breaks `scrollIntoView` functionality

This issue has been tracked since 2022-11-30.

Describe the bug

When a formatter (column headerRenderer or formatter) renders an element with a tabIndex="0" attribute, the horizontal scroll jumps beyond expected focus. I believe this is due to a query selector using [tabIndex="0"] called within the scrollIntoView function here: https://github.com/adazzle/react-data-grid/blob/main/src/DataGrid.tsx#L775

To Reproduce

  1. Create a grid with several columns that have a specified width so the grid may scroll horizontally depending on window size
  2. Give one column definition a formatter that returns an element with a tabIndex="0" attribute
  3. When clicking on a cell within a column farthest from the tabIndex="0" column, note the cell first gets focus
  4. Click again on that focused cell and the grid scroll horizontally jumps to the tabIndex column, but the focused cell is the same (and may not be in view anymore)

Link to code example:

In the code sandbox link, keep the browser tab width small and scroll all the way to the right-most column. Click on a row cell (column FIVE row foo) more than once and see the grid scroll far to the left.

Expected behavior

The focused cell should remain in the grid view.


  • react-data-grid version: 7.0.0-beta.20 (but this appears to be an issue since beta-13, does not repro in beta-12)
  • react/react-dom version: 18.0.0
More Details About Repo
Owner Name adazzle
Repo Name react-data-grid
Full Name adazzle/react-data-grid
Language TypeScript
Created Date 2015-03-06
Updated Date 2023-03-23
Star Count 5922
Watcher Count 129
Fork Count 2072
Issue Count 161


Issue Title Created Date Updated Date