material-table: Error while typing on input on new row, if onRowDataChange

Guidelines

  • Please include a demo of the issue/behavior/question you have

  • Please try to be as detailed as possible

  • You may fork one of the following starter templates if you would like:

Describe the bug While typing on any one of the inputs on a new row (that displays on click of add icon), if the editComponent input includes onRowDataChange property, then TypeError: _this2.props.onBulkEditRowChanged is not a function is thrown. This is because onBulkEditRowChanged function is not defined in a new row props.

To Reproduce Steps to reproduce the behavior:

  1. Create a MaterialTable component
  2. Add editComponent for a column
  3. On column with editComponent, add onRowDataChange action
  4. On the browser, click on add row
  5. On the new row created, start typing on the column with onRowDataChange
  6. See error

Expected behavior Normal behaviour as the other rows while updation, but in the context of new addition.

Screenshots image image image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: chrome
  • Version 84.0.4147.89 (Official Build) (64-bit)

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 33
  • Comments: 29

Commits related to this issue

Most upvoted comments

Its not a bug but it was renamed to onBulkUpdate. So you need to use this.

+1 - It does not seem to be working on the example page as well. https://material-table.com/#/docs/features/editable

Also, this seems to be an issue with the latest version of material-table (1.68). Seems to be working fine with 1.67.1.

Have similar issue. Downgrade to previous version 1.67.1

Hello @all, so this is fixed with 1.69.0 with the PR #2313 merged 9 days ago and released yesterday, as our release cycle is every Sunday. That’s why I mentioned this issue in the corresponding PR and it was closed upon merge. The documentation still fails, because it is always a few version behind the current version to get all the new changes into the docs. I hoped you all would be a little bit more patient for fixes, since we are all full time employed and do this for free.

@Domino987 This is a bug indeed, it shouldn’t be closed. Have a look for yourself at https://material-table.com/#/docs/features/editable:

  1. Open the console
  2. Expand “Editable example”
  3. Click on the add button
  4. Try writing anything in the “name” field. The UI becomes broken immediately and the following error appears:
TypeError: e.props.onBulkEditRowChanged is not a function. (In 'e.props.onBulkEditRowChanged(e.props.data,n)', 'e.props.onBulkEditRowChanged' is undefined)

It works when I downgraded to 1.67.1. Just be careful to remove the ^ in your package.json. -> You should have: "material-table": "1.67.1", and not "material-table": "^1.67.1", (it might install 1.68, the buggued version)

@Domino987 ok, let’s try adding a column in your examples page, when u start type text to column, table is crashed https://material-table.com/#/docs/features/editable image

@petr-like Literally right now encountered this issue, as the other dev friends said, downgrade to 1.67.1 and make sure in your package.json looks something like this:

"material-table": "1.67.1" not "material-table": "^1.67.1"

It worked for me instantly…

@Domino987 ok, let’s try adding a column in your examples page, when u start type text to column, table is crashed https://material-table.com/#/docs/features/editable image

1.69.0 fixed this issue but this version produces another bug with onRowUpdate: the entire page completely freezes after some updates (4-5), see https://github.com/mbrn/material-table/issues/2400 for the similar issue with delete action. 1.67.1 works stable with update action.

I am having the same issue while running the codesandbox.io material-table example referenced in material-ui.com. Easily reproducible by simply clicking on the edit in sandbox example and attempting to add a new row. The error is thrown when typing in one of the input fields of the newly added row.