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

AAverin · 2018-10-21T10:07:50Z

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

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2018-10-21T18:07:33Z

@AAverin Providing a reproduction would really help. It doesn't have to be a codesandbox, it can be a git repository.

gsbelarus · 2018-10-22T07:40:27Z

This is very similar to an error I have after upgrading from 3.2.1 to 3.3.0. 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)

AAverin · 2018-10-22T08:33:20Z

@oliviertassinari I will try to replicate on codesandbox
That warning though, wouldn't it help to figure out the problem without sample project?

urkopineda · 2018-10-22T10:00:23Z

Same here as @gsbelarus, on a TextField usign it as a select I'm getting: Uncaught TypeError: Cannot read property 'removeAttribute' of null in:

manageAriaHidden.js:28
at ariaHidden (manageAriaHidden.js:28)
at ModalManager.remove (ModalManager.js:188)
at Modal._this.handleClose (Modal.js:145)
at Modal.componentDidUpdate (Modal.js:221)

amok · 2018-10-22T16:36:17Z

+1
have the same error @gsbelarus has
it happened after updating the the last version @material-ui/[email protected]

gsbelarus · 2018-10-22T16:55:22Z

I think this is the same problem as in #13341

urkopineda · 2018-10-23T06:37:05Z

Definitely it's related to #13349 and it is labeled as a bug

AAverin · 2018-10-25T04:07:16Z

I tried going back a few versions and error doesn't go away, so it's probably unrelated to linked bugs

In the log I get at least 8 instances of an error on a relatively simple page, and loading keeps going.
Could it be some kind of the loop?
Error I get once again:

Uncaught TypeError: Cannot read property 'focusVisible' of null
    at getDerivedStateFromProps (ButtonBase.js:347)
    at applyDerivedStateFromProps (react-dom.development.js:11589)
    at mountClassInstance (react-dom.development.js:11910)
    at updateClassComponent (react-dom.development.js:13492)
    at beginWork (react-dom.development.js:14090)
    at performUnitOfWork (react-dom.development.js:16416)
    at workLoop (react-dom.development.js:16454)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at replayUnitOfWork (react-dom.development.js:15745)
    at renderRoot (react-dom.development.js:16548)
    at performWorkOnRoot (react-dom.development.js:17387)
    at performWork (react-dom.development.js:17295)
    at performSyncWork (react-dom.development.js:17267)
    at requestWork (react-dom.development.js:17155)
    at scheduleWork (react-dom.development.js:16949)
    at scheduleRootUpdate (react-dom.development.js:17637)
    at updateContainerAtExpirationTime (react-dom.development.js:17664)
    at updateContainer (react-dom.development.js:17691)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17957)
    at react-dom.development.js:18097
    at unbatchedUpdates (react-dom.development.js:17518)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:18093)
    at Object.render (react-dom.development.js:18152)
    at app.js:42
    at HTMLDocument.listener (ready.js:23)

AAverin · 2018-10-25T04:58:44Z

I have also tried applying some theme with MuiThemeProvider because I have only one MaterialUI component in the project, but that didn't help

AAverin · 2018-10-25T05:04:43Z

Found out that I get the issue on any kind of Button I use, even regular

I suppose it's not a bug and it's just me doing something wrong, so if anybody has any idea what – I would be glad to get any advice =)

oliviertassinari · 2018-10-25T05:55:59Z

OK, I'm closing for now.

zsalzbank · 2018-10-26T13:42:31Z

This was happening to me too. It was because the version of hoist-non-react-statics was not up to date. Updated it to the latest (or at least v2.5.0) to get it working.

confiscate · 2018-11-14T09:52:53Z

this is still a problem for me. I upgraded to the latest version of material-ui, and still get this error:

"@material-ui/core": "^3.5.1",
"@material-ui/icons": "^3.0.1",

anyone have any ideas why? This should already be fixed in the latest material-ui dependency, but I am still seeing this issue

confiscate · 2018-11-15T01:00:55Z

i changed my package.json to roll it back to 3.0.0 and everything worked. The errors all went away.

"@material-ui/core": "^3.0.0",

sant3001 · 2018-12-21T16:53:14Z

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

n-3-0 · 2018-12-21T22:14:52Z

Deployed some code to production today, hit this exact issue in prod only with ButtonBase.

oliviertassinari · 2018-12-21T22:54:55Z

I highly doubt the issue is on Material-UI side, now, there are too many people involved to ignore the problem. This sounds like an issue with hoist-non-react-statics. The dependency used to have a bug with the hoisting of getDerivedStateFromProps. Basically, it was moving the static method from the wrapped component to the wrapping HOC. withStyles doesn't use the state, hence the error.

Are you guys using the latest version of Material-UI? Do you flatten the npm dependencies?

This was happening to me too. It was because the version of hoist-non-react-statics was not up to date. Updated it to the latest (or at least v2.5.0) to get it working.

@zsalzbank Oh great, the theory is confirmed, I'm closing.

maerzhase · 2019-01-24T11:19:36Z

i have [email protected] and @material-ui/[email protected] and getting the same error...

eps1lon · 2019-01-29T07:20:44Z

@maerzhase You should use the latest version of hoist-non-react-statics and should get rid of any dependency that is using 2.x

ypresto · 2019-02-15T13:05:21Z

FYI: You can add below snippet to package.json to tell yarn to always use fixed version of hoist-non-react-statics for all nested dependencies.

  "resolutions": {
    "hoist-non-react-statics": "^3.2.1"
  },

oliviertassinari added the status: waiting for author Issue with insufficient information label Oct 21, 2018

oliviertassinari closed this as completed Oct 25, 2018

zsalzbank mentioned this issue Oct 26, 2018

[ButtonBase] Regression in 3.1.2 causes error "Cannot read property 'focusVisible' of null" #13283

Closed

2 tasks

oliviertassinari reopened this Dec 21, 2018

oliviertassinari added the component: ButtonBase The React component. label Dec 21, 2018

oliviertassinari closed this as completed Dec 21, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

AAverin commented Oct 21, 2018

oliviertassinari commented Oct 21, 2018

gsbelarus commented Oct 22, 2018 •

edited

Loading

AAverin commented Oct 22, 2018

urkopineda commented Oct 22, 2018 •

edited

Loading

amok commented Oct 22, 2018

gsbelarus commented Oct 22, 2018

urkopineda commented Oct 23, 2018

AAverin commented Oct 25, 2018 •

edited

Loading

AAverin commented Oct 25, 2018

AAverin commented Oct 25, 2018

oliviertassinari commented Oct 25, 2018

zsalzbank commented Oct 26, 2018

confiscate commented Nov 14, 2018

confiscate commented Nov 15, 2018

sant3001 commented Dec 21, 2018 •

edited by oliviertassinari

Loading

n-3-0 commented Dec 21, 2018

oliviertassinari commented Dec 21, 2018

maerzhase commented Jan 24, 2019

eps1lon commented Jan 29, 2019

ypresto commented Feb 15, 2019 •

edited

Loading

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

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

Comments

AAverin commented Oct 21, 2018

Expected Behavior

Current Behavior

Steps to Reproduce

Context

Your Environment

oliviertassinari commented Oct 21, 2018

gsbelarus commented Oct 22, 2018 • edited Loading

AAverin commented Oct 22, 2018

urkopineda commented Oct 22, 2018 • edited Loading

amok commented Oct 22, 2018

gsbelarus commented Oct 22, 2018

urkopineda commented Oct 23, 2018

AAverin commented Oct 25, 2018 • edited Loading

AAverin commented Oct 25, 2018

AAverin commented Oct 25, 2018

oliviertassinari commented Oct 25, 2018

zsalzbank commented Oct 26, 2018

confiscate commented Nov 14, 2018

confiscate commented Nov 15, 2018

sant3001 commented Dec 21, 2018 • edited by oliviertassinari Loading

n-3-0 commented Dec 21, 2018

oliviertassinari commented Dec 21, 2018

maerzhase commented Jan 24, 2019

eps1lon commented Jan 29, 2019

ypresto commented Feb 15, 2019 • edited Loading

gsbelarus commented Oct 22, 2018 •

edited

Loading

urkopineda commented Oct 22, 2018 •

edited

Loading

AAverin commented Oct 25, 2018 •

edited

Loading

sant3001 commented Dec 21, 2018 •

edited by oliviertassinari

Loading

ypresto commented Feb 15, 2019 •

edited

Loading