Material-table: selection error on selecting grouped row's items.

Created on 26 Apr 2019  ·  2Comments  ·  Source: mbrn/material-table

When I select an item in grouped rows, these errors are shown:

react-beautiful-dnd An error has occurred while a drag is occurring. Any existing drag will be cancelled. > Uncaught TypeError: Cannot read property 'checked' of undefined 👷‍ This is a development only message. It will be removed in production builds.
console.(anonymous function) @ index.js:1437
printFatalDevError @ react-beautiful-dnd.esm.js:5279
DragDropContext._this.onFatalError @ react-beautiful-dnd.esm.js:5303
DragDropContext._this.onWindowError @ react-beautiful-dnd.esm.js:5313
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
flushInteractiveUpdates$1 @ react-dom.development.js:21540
batchedUpdates @ react-dom.development.js:2260
dispatchEvent @ react-dom.development.js:5110
(anonymous) @ react-dom.development.js:21526
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:21525
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
error (async)
componentDidMount @ react-beautiful-dnd.esm.js:5366
commitLifeCycles @ react-dom.development.js:18115
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
scheduleRootUpdate @ react-dom.development.js:21610
updateContainerAtExpirationTime @ react-dom.development.js:21636
updateContainer @ react-dom.development.js:21704
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22017
(anonymous) @ react-dom.development.js:22169
unbatchedUpdates @ react-dom.development.js:21492
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22165
render @ react-dom.development.js:22240
./src/index.js @ index.js:6
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ index.js:6
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1437 raw ErrorEvent {isTrusted: true, message: "Uncaught TypeError: Cannot read property 'checked' of undefined", filename: "http://localhost:3000/static/js/0.chunk.js", lineno: 42214, colno: 31, …}
console.(anonymous function) @ index.js:1437
printFatalDevError @ react-beautiful-dnd.esm.js:5281
DragDropContext._this.onFatalError @ react-beautiful-dnd.esm.js:5303
DragDropContext._this.onWindowError @ react-beautiful-dnd.esm.js:5313
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
flushInteractiveUpdates$1 @ react-dom.development.js:21540
batchedUpdates @ react-dom.development.js:2260
dispatchEvent @ react-dom.development.js:5110
(anonymous) @ react-dom.development.js:21526
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:21525
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
error (async)
componentDidMount @ react-beautiful-dnd.esm.js:5366
commitLifeCycles @ react-dom.development.js:18115
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
requestWork @ react-dom.development.js:21102
scheduleWork @ react-dom.development.js:20915
scheduleRootUpdate @ react-dom.development.js:21610
updateContainerAtExpirationTime @ react-dom.development.js:21636
updateContainer @ react-dom.development.js:21704
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:22017
(anonymous) @ react-dom.development.js:22169
unbatchedUpdates @ react-dom.development.js:21492
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22165
render @ react-dom.development.js:22240
./src/index.js @ index.js:6
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ index.js:6
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
material-table.js:173 Uncaught TypeError: Cannot read property 'checked' of undefined
    at material-table.js:173
    at Array.forEach (<anonymous>)
    at findSelecteds (material-table.js:172)
    at MaterialTable.onSelectionChange (material-table.js:181)
    at MaterialTable.<anonymous> (material-table.js:646)
    at callCallback (react-dom.development.js:17104)
    at commitUpdateEffects (react-dom.development.js:17144)
    at commitUpdateQueue (react-dom.development.js:17132)
    at commitLifeCycles (react-dom.development.js:18147)
    at commitAllLifeCycles (react-dom.development.js:19674)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:19898)
    at react-dom.development.js:21446
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at completeRoot (react-dom.development.js:21445)
    at performWorkOnRoot (react-dom.development.js:21368)
    at performWork (react-dom.development.js:21273)
    at flushInteractiveUpdates$1 (react-dom.development.js:21540)
    at batchedUpdates (react-dom.development.js:2260)
    at dispatchEvent (react-dom.development.js:5110)
    at react-dom.development.js:21526
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at interactiveUpdates$1 (react-dom.development.js:21525)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)
(anonymous) @ material-table.js:173
findSelecteds @ material-table.js:172
(anonymous) @ material-table.js:181
(anonymous) @ material-table.js:646
callCallback @ react-dom.development.js:17104
commitUpdateEffects @ react-dom.development.js:17144
commitUpdateQueue @ react-dom.development.js:17132
commitLifeCycles @ react-dom.development.js:18147
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
flushInteractiveUpdates$1 @ react-dom.development.js:21540
batchedUpdates @ react-dom.development.js:2260
dispatchEvent @ react-dom.development.js:5110
(anonymous) @ react-dom.development.js:21526
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:21525
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
index.js:1437 The above error occurred in the <MaterialTable> component:
    in MaterialTable
    in Unknown (created by WithStyles(Component))
    in WithStyles(Component) (at MainPage.js:112)
    in div (at MainPage.js:93)
    in MainPage (created by WithStyles(MainPage))
    in WithStyles(MainPage) (at App.js:9)
    in App (at src/index.js:6)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.(anonymous function) @ index.js:1437
logCapturedError @ react-dom.development.js:17880
logError @ react-dom.development.js:17916
update.callback @ react-dom.development.js:18939
callCallback @ react-dom.development.js:17104
commitUpdateEffects @ react-dom.development.js:17144
commitUpdateQueue @ react-dom.development.js:17132
commitLifeCycles @ react-dom.development.js:18172
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
flushInteractiveUpdates$1 @ react-dom.development.js:21540
batchedUpdates @ react-dom.development.js:2260
dispatchEvent @ react-dom.development.js:5110
(anonymous) @ react-dom.development.js:21526
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:21525
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
material-table.js:173 Uncaught TypeError: Cannot read property 'checked' of undefined
    at material-table.js:173
    at Array.forEach (<anonymous>)
    at findSelecteds (material-table.js:172)
    at MaterialTable.onSelectionChange (material-table.js:181)
    at MaterialTable.<anonymous> (material-table.js:646)
    at callCallback (react-dom.development.js:17104)
    at commitUpdateEffects (react-dom.development.js:17144)
    at commitUpdateQueue (react-dom.development.js:17132)
    at commitLifeCycles (react-dom.development.js:18147)
    at commitAllLifeCycles (react-dom.development.js:19674)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:19898)
    at react-dom.development.js:21446
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at completeRoot (react-dom.development.js:21445)
    at performWorkOnRoot (react-dom.development.js:21368)
    at performWork (react-dom.development.js:21273)
    at flushInteractiveUpdates$1 (react-dom.development.js:21540)
    at batchedUpdates (react-dom.development.js:2260)
    at dispatchEvent (react-dom.development.js:5110)
    at react-dom.development.js:21526
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at interactiveUpdates$1 (react-dom.development.js:21525)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)
(anonymous) @ material-table.js:173
findSelecteds @ material-table.js:172
(anonymous) @ material-table.js:181
(anonymous) @ material-table.js:646
callCallback @ react-dom.development.js:17104
commitUpdateEffects @ react-dom.development.js:17144
commitUpdateQueue @ react-dom.development.js:17132
commitLifeCycles @ react-dom.development.js:18147
commitAllLifeCycles @ react-dom.development.js:19674
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19898
(anonymous) @ react-dom.development.js:21446
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21445
performWorkOnRoot @ react-dom.development.js:21368
performWork @ react-dom.development.js:21273
flushInteractiveUpdates$1 @ react-dom.development.js:21540
batchedUpdates @ react-dom.development.js:2260
dispatchEvent @ react-dom.development.js:5110
(anonymous) @ react-dom.development.js:21526
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:21525
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
bug

All 2 comments

To fix the issue, just change line 180 in material-table.js to:
findSelecteds(_this.state.originalData);

This is done.

Was this page helpful?
0 / 5 - 0 ratings