Difference between blur and change?

[dmuldoon]

When I double click on a cell in an editable grid it becomes editable. When I complete my edit, if I press Enter the grid is updated just as I'd expect. If instead I tab to the next cell, my onRowUpdated callback is invoked (again, as I'd expect) and all underlying data structures are updated appropriately but the grid still displays the previous value. My theory was that React did not detect the change and thus the full rendering was short circuited somewhere but I did add a key to my row, e.g.,:

<ReactDataGrid.Row key={row.id} ref="row" {...this.props}/>

Is this a bug? A feature? Is there any control over which event makes the cell editable? Double-click vs. click, etc.?

Side note - I'm using a custom row renderer as described here:

#249

[bakesteve]

might be an issue on the custom RR
to be sure if that's the route or not, check the demo and see if you get the same behaviour?
http://adazzle.github.io/react-data-grid/examples.html#/all-the-features
Trying that for me all seems fine, I can commit an edit by clicking away, enter, or tab, with enter or double click opening the editor

[dmuldoon]

Anything look odd in my RR:

const RowRenderer = React.createClass({
  propTypes: {
    columns: React.PropTypes.array.isRequired,
    row: React.PropTypes.object.isRequired
  },

  setScrollLeft: function (scrollBy:number) {
    this.refs.row.setScrollLeft(scrollBy);
  },

  render: function ():React.Element {
    const {row, columns} = this.props;

    if (row.controlled && columns.length > 2) {
      var DropDownEditor = ReactDataGrid.Editors.DropDownEditor;
      columns[2].editor = <DropDownEditor options={row.codeListItems}/>;
    } else {
      columns[2].editor = null;
    }

    return (<ReactDataGrid.Row key={row.id} ref="row" {...this.props} />);
  }
});

[jpdriver]

hey @dmuldoon -- if after committing your edit you select the cell (only clicking once) does the value update?

[dmuldoon]

@jpdriver - that's exactly what is happening. In fact, I didn't even realize that the entire row suffers from this. Scenario:

• I make an edit to row 1, column 1
• The results of my edit should update row 1, column 1, column 2 and column 3 (because column 2 and column 3 are related to column 1 in my data model, and the row's data structure reflects this)
• When I press enter, row 1 and column 1 are updated (good) but column 2 and column 3 are not (bad)
• When I click on column 2, column 2 and column 3 are updated

[jpdriver]

ok cool. please can you stick breakpoints in shouldComponentUpdate() for Row and Cell and see if they return true? From the way you're describing it it sounds like Row will return true but the Cell in question won't..

hey also which version of the package are you using?

[jpdriver]

related: c180102

[dmuldoon]

I am using version 0.13.34

[jpdriver]

ok -- this one's on me but that change is missing from 0.13.x 😳

it's in 0.12.x and 0.14.x (long story...) -- so it might be as simple as including that one extra line from the above commit?

[dmuldoon]

@jpdriver - confirmed that shouldComponentUpdate is returning false for the other values in the row. (I see my updated values flying by but, alas, false is returned)

[jpdriver]

cool, grab the change above and i think that'll be it 😄

[dmuldoon]

@jpdriver - when you say "grab" that change, how exactly should I apply it?

[jpdriver]

so just add || this.props.value !== nextProps.value; to the end of shouldComponentUpdate() in Cell.js

[dmuldoon]

This is a little tricky for me, I think, as we use webpack, etc. and don't have static module copies. I'm looking into the logistics of this...recommendations?

[dmuldoon]

@jpdriver - is there any way this could be patched into 0.13.x?