Material-ui: RadioButton - Unknown event handler property `onExited` & received `true` for a non-boolean attribute `in`

[tomanagle]

Expected Behavior

Radio input animations should not be dark disappear when the animation finished

Current behavior

Radio buttons throw two warnings to the console and the animations do not finish, leaving a dark circle around the selected radio input.

Steps to Reproduce (for bugs)

    <RadioButtonGroup
          valueSelected="test radio"
          name={'test'}

        >
          <RadioButton
            value="test radio"
            label="test radio"
          />

          <RadioButton
            value="test 2 radio"
            label="test radio"
          />

        </RadioButtonGroup>

When I click the radio buttons, I get the following warning in the console.

[warning.js:33 Warning: Unknown event handler property `onExited`. It will be ignored.
    in div (created by CircleRipple)
    in CircleRipple
    in div (created by TransitionGroup)
    in TransitionGroup (created by TouchRipple)
    in div (created by TouchRipple)
    in TouchRipple (created by EnhancedSwitch)
    in div (created by EnhancedSwitch)
    in div (created by EnhancedSwitch)
    in div (created by EnhancedSwitch)
    in EnhancedSwitch (created by RadioButton)
    in RadioButton (created by RadioButtonGroup)
    in div (created by RadioButtonGroup)
    in RadioButtonGroup (created by BenchmarkingSurveyPage)
    in div (created by BenchmarkingSurveyPage)
    in BenchmarkingSurveyPage (created by Connect(BenchmarkingSurveyPage))
    in Connect(BenchmarkingSurveyPage) (created by Route)
    in Route (created by PrivateRoute)
    in PrivateRoute
    in Switch
    in div
    in Router
    in MuiThemeProvider
    in div
    in Provider

&&

warning.js:33 Warning: Received `true` for a non-boolean attribute `in`.

If you want to write it to the DOM, pass a string instead: in="true" or in={value.toString()}.
    in div (created by CircleRipple)
    in CircleRipple
    in div (created by TransitionGroup)
    in TransitionGroup (created by TouchRipple)
    in div (created by TouchRipple)
    in TouchRipple (created by EnhancedSwitch)
    in div (created by EnhancedSwitch)
    in div (created by EnhancedSwitch)
    in div (created by EnhancedSwitch)
    in EnhancedSwitch (created by RadioButton)
    in RadioButton (created by RadioButtonGroup)
    in div (created by RadioButtonGroup)
    in RadioButtonGroup (created by BenchmarkingSurveyPage)
    in div (created by BenchmarkingSurveyPage)
    in BenchmarkingSurveyPage (created by Connect(BenchmarkingSurveyPage))
    in Connect(BenchmarkingSurveyPage) (created by Route)
    in Route (created by PrivateRoute)
    in PrivateRoute
    in Switch
    in div
    in Router
    in MuiThemeProvider
    in div
    in Provider

The radio buttons also get dark circles around them. It's as though the ripple effect has a fill of rgba(0, 0, 0, 0.87); and never gets removed after the animation.

Screenshot: https://i.imgur.com/RTgn8DN.jpg

Your Environment

Windows 10, using Chrome 63.0.3239.132.

[quirimmo]

Any solution to this @tomanagle pls?
Having the same with RaisedButton

[tomanagle]

Can you please past your package.json here?

[quirimmo]

Thanks @tomanagle .
Here it is:

"dependencies": {
    "d3": "^4.12.2",
    "history": "^4.7.2",
    "material-ui": "^0.20.0",
    "react": "^16.2.0",
    "react-d3-components": "^0.7.1",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-transition-group": "^2.2.1",
    "redux": "^3.7.2"
  }

I didn't post you the devDependencies cause I am not sure you need them... do you?

[wentsa]

Ok, I found where is the problem:
You (and me) are using react-transition-group version 2.x.x while material-ui is dependent on version ^1.2.1. Those two are unfortunately backwards incompatible (react-transition-group). Therefore you have to downgrade your dependency to be the same as the one from material-ui:

"dependencies": {
    ...
    "react-transition-group": "^1.2.1",
    ...
  }

[oliviertassinari]

@wentsa Thanks for sharing the solution.