mbrn/material-table

Uncaught TypeError: Cannot read properties of undefined (reading 'saveTooltip')

BA-RTC opened this issue · 0 comments

When using the celleditable prop with row grouping, component MTableEditCell crashes due to required prop 'localization' having value 'undefined'.
This issue was reported 3 years ago in PRs 2389, 2610, and 2860 but appears to remain unresolved.

To reproduce problem:
Include a column definition with grouping: true, defaultGroupOrder: 0, defaultGroupSort: 'asc'
Include a column definition with editable: always
Include prop cellEditable in the MaterialTable component
Run the application
Expand a group of rows
Click on an editable cell, error occurs

Console messages:
Warning: Failed prop type: The prop localization is marked as required in MTableEditCell, but its value is undefined.
Uncaught TypeError: Cannot read properties of undefined (reading 'saveTooltip')

Expected behavior: cell editing allowed

Tested on Chrome v122 in Windows 10

The problem appears to be in file m-table-edit-cell.js:

      var actions = [{
        icon: this.props.icons.Check,
        tooltip: this.props.localization.saveTooltip,
        onClick: this.onApprove,
        disabled: this.state.isLoading
      }, {
        icon: this.props.icons.Clear,
        tooltip: this.props.localization.cancelTooltip,
        onClick: this.onCancel,
        disabled: this.state.isLoading
      }];
...
MTableEditCell.propTypes = {
  cellEditable: _propTypes.default.object.isRequired,
  columnDef: _propTypes.default.object.isRequired,
  components: _propTypes.default.object.isRequired,
  errorState: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
  icons: _propTypes.default.object.isRequired,
  localization: _propTypes.default.object.isRequired,
  onCellEditFinished: _propTypes.default.func.isRequired,
  rowData: _propTypes.default.object.isRequired,
  size: _propTypes.default.string
};

I have attempted to circumvent the problem by adding a localization prop to the MaterialTable component. I may have gotten the structure wrong; this is the only structure I've found for this prop in the material-table documentation.

	localization={{
		body: {
			editRow: {
				saveTooltip: 'saveTooltip'
			}
		}
	}}