question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:14
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

12reactions
oliviertassinaricommented, Oct 23, 2018

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

10reactions
oliviertassinaricommented, Oct 23, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Modal onClose error: Cannot read property 'removeAttribute ...
I'm following this exact example, but when I open up the menu and click to close the menu... then the application crashes with...
Read more >
Uncaught TypeError: Cannot read property of null - iDiallo
All this means is that you are trying to access a property of an object that is undefined. These usually happens when we...
Read more >
Cannot read property 'removeAttribute' of null - Stack Overflow
I am using Javascript executor to remove readonly attribute but it is giving an error. Cannot read property 'removeAttribute' of null .
Read more >
Uncaught TypeError: Cannot read property 'cancelPopUp' of ...
This is a read-only property on the window object and it becomes set to null (or with IE, it actually throws an exception...
Read more >
An exception occurred in the client script. Error: Cannot read ...
I am using modal to add and edit a record. when i add a new one it works fine, but when i edit...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found