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:
- Created 5 years ago
- Reactions:2
- Comments:20 (8 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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') {
toif (!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 CardActionAreaThis 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: