React-data-grid: Double Event triggered on Editing Cells

[gtkovas]

I'm attempting to use the grid as an interactive view into a database, allowing the user to edit/add entries by directly editing cells in the grid. However, I'm getting some strange behaviour apparently dependent on the key that is used to complete the edit:

Simply clicking away from the cell works fine.
Pressing 'Enter' fires two copies of the update event (this is an issue due to the asynchronicity making catching "repeat" events almost impossible)
Pressing 'Tab' fires two events AND fails to re-render the grid/cell (refocusing makes it show the correct info)
Using the arrow keys presents the same issues as the 'Tab' key.

Is there some particular part of the grid definition I might be doing wrong that could cause these errors? Or is there any other advice/help to offer?

I can't seem to attach a .txt of the code file ("something went really wrong"...), so here is the part defining the grid:

var DataGrid = React.createClass({

getInitialState: function()
{
console.log("Getting initial state");
var rows = getRows();
//setGrid(this);
return {rows : rows};
},

rowGetter: function(rowIdx)
{
return this.state.rows[rowIdx];
},

handleRowUpdated: function(e)
{
if(this.state.rows[e.rowIdx][e.cellKey] != e.updated[e.cellKey]/* && e.key == 'Enter'*/)
{//table doesn't seem to update properly (though using forceUpdate below...) if the user
//uses a key other than "Enter". Using Tab or the arrow keys doesn't do it.
//The database updates, but the shown data doesn't change - refocusing on the element
//changes it. For now, restricting to the "Enter" key.
console.log(JSON.stringify("Last Event is: " + this.state.lastEvent));
console.log(JSON.stringify(e));
console.log(JSON.stringify(e) == JSON.stringify(this.state.lastEvent));
this.setState({lastEvent: e});
var boxNumber = this.state.rows[e.rowIdx]['box_num'];
var key = e.cellKey;
var data = e.updated[e.cellKey];
var sendString = '{"key":"' + key + '", "data":"' + data + '"}';
e.boxNumber = boxNumber;
console.log("Sending: " + sendString);
jQuery.ajax({
url: ("/CollectionBox/edit/" + boxNumber),
type: 'POST',
dataType: 'text',
data: sendString,
success: function(rMessage)
{
changeNotice(rMessage);

      if(rMessage[0] == 'S') //"[S]uccess"
      {  
          var event = dataGrid.state.lastEvent;
          var boxNum = event.boxNumber;
          var key = event.cellKey;
          changeRow = _rows.filter(function ( obj ) { return obj.box_num == boxNum })[0];
          //console.log("We will be changing this row: " + JSON.stringify(changeRow));
          //console.log(key + ":" + changeRow[key] + " will become " + key + ":" + event.updated[key]);
          dataGrid.state.rows[event.rowIdx][event.cellKey] = event.updated[event.cellKey];
          dataGrid.forceUpdate(); //would like to replace forceUpdate
      }
      console.log(rMessage);
      }
  });
  }

},

handleGridSort: function(sortColumn, sortDirection)
{
var comparer = function(a, b)
{
if(sortDirection === 'ASC')
return (a[sortColumn] > b[sortColumn]) ? 1 : -1;
else if (sortDirection === 'DESC')
return (a[sortColumn] < b[sortColumn]) ? 1 : -1;
}
var rows = sortDirection === 'NONE' ? this.state.rows.slice(0) : this.state.rows.sort(comparer);
this.setState({rows : rows});
//renderGrid();
},

render: function() {
return ( enableCellSelect={true}
onGridSort={this.handleGridSort}
columns={columns}
rowGetter={this.rowGetter}
rowsCount={this.state.rows.length}
minHeight={700}
onRowUpdated={this.handleRowUpdated} />);
}
});

[bakesteve]

Ok - managed to reproduce that behaviour here:
http://adazzle.github.io/react-data-grid/examples.html#/all-features-immutable
if I edit a text editor and hit enter, I hit handleRowUpdated twice

To resolve this we'll need a failing test first, so once we have that we'll link to this issue so you can track.
And be happy to take a pull request on that if you want to jump on it straight away - it looks like the native event may be getting fired multiple times so need to see if there is an issue with how the events are being bound / bubbling, or something else

[malonecj]

Yes, the onKeyDown event is getting bound to both the <SimpleTextEditor/> and <EditorContainer/> components. There's a failing test here https://github.com/adazzle/react-data-grid/commit/dfb1de6f4aa90f2c1aed85f4c305d64b6980dd72 in PR https://github.com/adazzle/react-data-grid/pull/79

Removing the onKeyDown in <SimpleTextEditor/> will fix it

[bakesteve]

that's done now.
One side note - internally we've hot on the async issue and would definitely recommend you move to a flux framework, rather than having the ajax call and response handler in handleRowUpdated.
From what it sounds like you are doing, i'd actually say you may want to look at some form of local storage based container, with server side sync (or a framework, like meteor et al) - but good luck with the project and thanks for letting us know about this

[gtkovas]

Many thanks for the attention to this issue, as well as the suggestions for better use. I'm still new to the REACT ecosystem, and will be taking a look at Flux.

[armved]

I got the same problem when clicking beyond the table. Keys are triggering update once but if I click away from table then onGridRowsUpdated is triggering twice. Can you help me with this?

[dbraynard]

@AvoJFB, do you still have this problem and what version are you using? I have this happening also. I'm using 2.0.16.

If I hit enter after edit, the event fires once, but if I click off of it somewhere else with the mouse I get two events.

[armved]

Yes. I moved to ag-grid because of this problem. Also you are not first who mail me about this problem

2017-06-20 16:33 GMT+03:00 dbraynard [e-mail]:

@AvoJFB https://github.com/avojfb, do you still have this problem and
what version are you using? I have this happening also. I'm using 2.0.16.

If I hit enter after edit, the event fires once, but if I click off of it
somewhere else with the mouse I get two events.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/adazzle/react-data-grid/issues/78#issuecomment-309754631,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATfbUkOsHM4duhwZpx0BAs92SbqO411zks5sF8o5gaJpZM4GGxC7
.

[sharperconcepts]

Did anyone come up with a fix for this. I am seeing the react-blur event fire twice as well. I am not seeing any difference between the events. My only idea is to add a debounce to my update method to limit how often it can fire.