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.

RadioGroup/Radio: TypeError: Cannot read property 'focusVisible' of null

See original GitHub issue
  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Current Behavior

Exception when using Radio

Steps to Reproduce

Unfortunately, issue only reproduces on my project. I have tried to replicate my setup here: https://codesandbox.io/s/94z8j4z5my

Context

When copy-pasting RadioButtons sample(https://material-ui.com/demos/selection-controls/) into my project I get an error. I have posted details on Stackoverflow, including the screenshot. https://stackoverflow.com/questions/52913864/radio-cannot-read-property-focusvisible-of-null

Additionally, I get following warning:

Warning: `WithStyles(ButtonBase)` uses `getDerivedStateFromProps` but its initial state is undefined. This is not recommended. Instead, define the initial state by assigning an object to `this.state` in the constructor of `WithStyles(ButtonBase)`. This ensures that `getDerivedStateFromProps` arguments have a consistent shape.

Your Environment

Tech Version
Material-UI 3.2.2
React 16.5.2
Gatsby 1.9.178 with react-next plugin applied
Browser Chrome

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:20 (8 by maintainers)

github_iconTop GitHub Comments

3reactions
sant3001commented, Dec 21, 2018

I think this issue is happening because in the source code of ButtonBase line 144: https://github.com/mui-org/material-ui/blob/ef405054e0d8658565d3cb75d07deba2a1e9a8ff/packages/material-ui/src/ButtonBase/ButtonBase.js#L144 it is assumed that prevState is an object. A simple validation on the prevState variable would solve the issue. Changing the code from if (typeof prevState.focusVisible === 'undefined') { to if (!prevState || typeof prevState.focusVisible === 'undefined') { helps solving the problem. @oliviertassinari please consider re-opening this issue. It is happening to me when using the component CardActionArea

2reactions
gsbelaruscommented, Oct 22, 2018

This is very similar to an error I have after upgrading from 3.2.1 to 3.3.0. <Select> component worked well before but now falls on selecting MenuItem from a drop down list with message “TypeError: node is null”. The error stack is:

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)  
Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeError: Cannot read property 'focusVisible' of null ... - GitHub
This is not a v0.x issue. I have searched the issues of this repository and believe that this is not a duplicate.
Read more >
reactjs - Radio, Cannot read property 'focusVisible' of null
I have no idea what goes into conflict with what, but basically any time I try to use Radio or RadioGroup components I...
Read more >
How can I get the value of the selected radio button?
I want to get the value of the selected radio button, i tried it through the function handleRadioChange(event) , but I'm recieving that...
Read more >
How to fix " TypeError: Cannot read properties of ... - YouTube
JS Casts 12 - How to fix " TypeError : Cannot read properties of null (reading addEventListener)" in JavaScript.
Read more >
Cannot read property 'addEventListener' of null - YouTube
Ask your question in the comments, I will probably make a video answer to it!**What to do when you get the exception: Cannot...
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