React-data-grid: Multiple grids on one page displayed at the same time cause tab issues in the second grid

[moodysalem]

Tabbing while working in the second grid affects the first grid if two grids are displayed on a page at the same time

[malonecj]

thanks. we will recreate this and fix

[joshparolin]

I'm also encountering this issue. My workflow is that when a data grid's cell is updated, it's firing an update to Redux which in turn feeds the data back into the view and re-renders the grids. It looks like the re-render is triggering the checkFocus() function on each grid's selected <Cell>, thus the page will jump to the first grid's selected cell even though my focus was on a different grid down the page.

A couple of solutions I'm looking at:

• Do a better job of checking if shouldComponentUpdate in my wrappers around each react-data-grid. If nothing new is incoming, I shouldn't need to re-render, thus it should not re-trigger checkFocus().
• On focus of a <Cell> in a grid, somehow de-focus (or deselect) any selected cell in other tables. Basically trying to return a false value for isSelected() so checkFocus() won't fire.

[joshparolin]

Alright, found a temporary solution:

In /react-data-grid/src/addons/grids/ReactDataGrid.js, I added the following method:
deselectCells: function() {
this.setState({ selected: { rowIdx: -1, idx: -1 } });
},

In my view, I already wrap each react-data-grid instance in a HOC that allows me to do some custom modification around the columns / rows before they're fed into the grid. So, by listening to a click outside of each wrapper component, I can now trigger the new method this.refs.grid.deselectCells(). This allows me to easily click between multiple grids without dealing with focus issues, because clicking out of any grid will remove any 'active' state.

On my wrapper component:
import listensToClickOutside from 'react-onclickoutside/decorator';
import ReactDataGrid from 'react-data-grid/addons';
...

@listensToClickOutside
export default class FormGrid extends React.Component {
...
handleClickOutside () {
this.refs.grid.deselectCells();
}
...

render () {
<ReactDataGrid ref='grid' ... />
}

[GenoD]

Is there any update on this issue??

[rina-andria]

Hi, I am having the same issue. any news about it?

[lavgl]

Hi, have the same issue.
Thanks for the great component.
And thanks to @joshparolin for providing the workaround.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[nwhitmont]

anybody looking at this?

[jacobbeasley]

Should we re-open this?

[eduardosmatheus]

I'm facing the same problem here

[LGorzo]

Same problem here.

[LGorzo]

Alright, found a temporary solution:

In /react-data-grid/src/addons/grids/ReactDataGrid.js, I added the following method:
deselectCells: function() {
this.setState({ selected: { rowIdx: -1, idx: -1 } });
},

In my view, I already wrap each react-data-grid instance in a HOC that allows me to do some custom modification around the columns / rows before they're fed into the grid. So, by listening to a click outside of each wrapper component, I can now trigger the new method this.refs.grid.deselectCells(). This allows me to easily click between multiple grids without dealing with focus issues, because clicking out of any grid will remove any 'active' state.

On my wrapper component:
import listensToClickOutside from 'react-onclickoutside/decorator';
import ReactDataGrid from 'react-data-grid/addons';
...

@listensToClickOutside
export default class FormGrid extends React.Component {
...
handleClickOutside () {
this.refs.grid.deselectCells();
}
...

render () {
<ReactDataGrid ref='grid' ... />
}

Is there some official way how to deselect a cell?