Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BA-RTC opened this issue Mar 26, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@BA-RTC
Copy link

BA-RTC commented Mar 26, 2024

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

@BA-RTC BA-RTC added the bug Something isn't working label Mar 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant