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

Modal onClose error: Cannot read property 'removeAttribute' of null #13349

Closed
jadbox opened this issue Oct 22, 2018 · 8 comments
Closed

Modal onClose error: Cannot read property 'removeAttribute' of null #13349

jadbox opened this issue Oct 22, 2018 · 8 comments
Assignees
Labels
bug 🐛 Something doesn't work component: modal This is the name of the generic UI component, not the React module!

Comments

@jadbox
Copy link

jadbox commented Oct 22, 2018

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)
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: modal This is the name of the generic UI component, not the React module! labels Oct 22, 2018
@oliviertassinari oliviertassinari self-assigned this Oct 22, 2018
@jeffy-g
Copy link

jeffy-g commented Oct 23, 2018

I encountered this problem earlier.

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

@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 23, 2018

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.

@recon-bi
Copy link

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]

@oliviertassinari
Copy link
Member

oliviertassinari commented Oct 23, 2018

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

@oliviertassinari
Copy link
Member

📦 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!

@johnking

This comment has been minimized.

@johnking

This comment has been minimized.

@RohovDmytro
Copy link

I believe this same error is alive within version 3.3.1.

image

@mui mui locked as resolved and limited conversation to collaborators Oct 27, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug 🐛 Something doesn't work component: modal This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

6 participants