Material-ui: Modal onClose error: Cannot read property 'removeAttribute' of null

Created on 22 Oct 2018  路  8Comments  路  Source: mui-org/material-ui

I'm following this exact example, but when I open up the menu and click to close the menu... then the application crashes with the below error:

Example used:
https://material-ui.com/demos/menus/#selected-menus

Deps:
"@material-ui/core": "^3.3.0",
"@material-ui/icons": "^3.0.1",
"typescript": "^3.1.3"

manageAriaHidden.js:28 Uncaught TypeError: Cannot read property 'removeAttribute' of null
    at ariaHidden (manageAriaHidden.js:28)
    at ModalManager.remove (ModalManager.js:188)
    at Modal._this.handleClose (Modal.js:145)
    at Modal.componentDidUpdate (Modal.js:221)
    at commitLifeCycles (react-dom.development.js:14693)
    at commitAllLifeCycles (react-dom.development.js:15905)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at commitRoot (react-dom.development.js:16075)
    at completeRoot (react-dom.development.js:17463)
    at performWorkOnRoot (react-dom.development.js:17391)
    at performWork (react-dom.development.js:17295)
    at performSyncWork (react-dom.development.js:17267)
    at interactiveUpdates$1 (react-dom.development.js:17558)
    at interactiveUpdates (react-dom.development.js:2208)
    at dispatchInteractiveEvent (react-dom.development.js:4913)
ariaHidden @ manageAriaHidden.js:28
remove @ ModalManager.js:188
Modal._this.handleClose @ Modal.js:145
componentDidUpdate @ Modal.js:221
commitLifeCycles @ react-dom.development.js:14693
commitAllLifeCycles @ react-dom.development.js:15905
callCallback @ react-dom.development.js:145
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:248
commitRoot @ react-dom.development.js:16075
completeRoot @ react-dom.development.js:17463
performWorkOnRoot @ react-dom.development.js:17391
performWork @ react-dom.development.js:17295
performSyncWork @ react-dom.development.js:17267
interactiveUpdates$1 @ react-dom.development.js:17558
interactiveUpdates @ react-dom.development.js:2208
dispatchInteractiveEvent @ react-dom.development.js:4913
index.js:2178 The above error occurred in the <Modal> component:
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Popover)
    in Popover (created by WithStyles(Popover))
    in WithStyles(Popover) (created by Menu)
    in Menu (created by WithStyles(Menu))
    in WithStyles(Menu) (created by AudioSettings)
    in div (created by AudioSettings)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (created by AudioSettings)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (created by AudioSettings)
    in AudioSettings (created by WithStyles(AudioSettings))
    in WithStyles(AudioSettings) (created by WithRoot)
    in MuiThemeProvider (created by WithRoot)
    in WithRoot (created by FloatMenu)
    in FloatMenu (created by WithStyles(FloatMenu))
    in WithStyles(FloatMenu) (created by WithRoot)
    in MuiThemeProvider (created by WithRoot)
    in WithRoot (created by NamespacesConsumerComponent)
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in WithContext (created by LoadNamespace)
    in LoadNamespace (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in LoadNamespace(WithRoot) (created by inject-LoadNamespace(WithRoot)-with-store)
    in inject-LoadNamespace(WithRoot)-with-store (created by DebateScene)
    in DebateScene (created by WithStyles(DebateScene))
    in WithStyles(DebateScene) (created by WithRoot)
    in MuiThemeProvider (created by WithRoot)
    in WithRoot (created by NamespacesConsumerComponent)
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in WithContext (created by LoadNamespace)
    in LoadNamespace (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in LoadNamespace(WithRoot) (created by DebateScene)
    in DebateScene (created by WithStyles(DebateScene))
    in WithStyles(DebateScene) (created by WithRoot)
    in MuiThemeProvider (created by WithRoot)
    in WithRoot (created by NamespacesConsumerComponent)
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in WithContext (created by LoadNamespace)
    in LoadNamespace (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in LoadNamespace(WithRoot) (created by LoadableComponent)
    in LoadableComponent (created by Route)
    in Route (created by DTCRouter)

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.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:14550
logError @ react-dom.development.js:14586
update.callback @ react-dom.development.js:15273
callCallback @ react-dom.development.js:11133
commitUpdateEffects @ react-dom.development.js:11172
commitUpdateQueue @ react-dom.development.js:11160
commitLifeCycles @ react-dom.development.js:14721
commitAllLifeCycles @ react-dom.development.js:15905
callCallback @ react-dom.development.js:145
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:248
commitRoot @ react-dom.development.js:16075
completeRoot @ react-dom.development.js:17463
performWorkOnRoot @ react-dom.development.js:17391
performWork @ react-dom.development.js:17295
performSyncWork @ react-dom.development.js:17267
interactiveUpdates$1 @ react-dom.development.js:17558
interactiveUpdates @ react-dom.development.js:2208
dispatchInteractiveEvent @ react-dom.development.js:4913
manageAriaHidden.js:28 Uncaught TypeError: Cannot read property 'removeAttribute' of null
    at ariaHidden (manageAriaHidden.js:28)
    at ModalManager.remove (ModalManager.js:188)
    at Modal._this.handleClose (Modal.js:145)
    at Modal.componentDidUpdate (Modal.js:221)
    at commitLifeCycles (react-dom.development.js:14693)
    at commitAllLifeCycles (react-dom.development.js:15905)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at commitRoot (react-dom.development.js:16075)
    at completeRoot (react-dom.development.js:17463)
    at performWorkOnRoot (react-dom.development.js:17391)
    at performWork (react-dom.development.js:17295)
    at performSyncWork (react-dom.development.js:17267)
    at interactiveUpdates$1 (react-dom.development.js:17558)
    at interactiveUpdates (react-dom.development.js:2208)
    at dispatchInteractiveEvent (react-dom.development.js:4913)
bug 馃悰 Modal

Most helpful comment

We will do a quick release with the fix. I suspect there is more.

All 8 comments

I encountered this problem earlier.

manageAriaHidden.js#ariaHidden check code(null?) was deleted...

manageAriaHidden.js#ariaHidden check code(null?) was deleted...

@jeffy-g Yes, it was. This defensive check was hidding something. We have already found one hidden problem.

As a temporary measure, I've been able to resolve this issue by rolling back to @material-ui/[email protected] and version locking the package.json

npm install @material-ui/[email protected]

We will do a quick release with the fix. I suspect there is more.

馃摝 v3.3.1 was just released. A regression test was added to prevent it to happen a second time in the future. We are sorry for the annoyance. I think that I will change the release schedule a bit. It's safer to release every Saturday (instead of Sunday). It should let time to fix the regressions Sunday before the week starts (+70% of the usage). If the problem persists, please open an issue with a reproduction example. Thank you!

I am having the same issue with 3.3.1.

To repeat it

Try to use a Select component inside a Dialog

it is fine to use the Select outside the Dialog

@3.2.2 works as @recon-bi mentioned

I believe this same error is alive within version 3.3.1.

image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ryanflorence picture ryanflorence  路  3Comments

activatedgeek picture activatedgeek  路  3Comments

anthony-dandrea picture anthony-dandrea  路  3Comments

mattmiddlesworth picture mattmiddlesworth  路  3Comments

ericraffin picture ericraffin  路  3Comments