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'
}
}
}}