Material-ui: Demo menu with fade transition doesn't remove the transparent backdrop

[01e9]

• Screencast https://streamable.com/nvc3e
• The page where it happens https://material-ui.com/demos/menus/

[DominikSerafin]

Experiencing this bug myself

It happens when only transition component is supplied (TransitionComponent={Fade})

I've found workaround, which is basically declaring additional explicit transition timeout (TransitionProps={{timeout: 400}})

So my final element looks like this:

  <Popover
    ...
    TransitionComponent={Fade}
    TransitionProps={{timeout: 400}}
  >

Here's the stack trace of the error before the workaround:

warning.js?dfb8:33
Warning: Failed prop type: Invalid prop `timeout` supplied to `Fade`.
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Popover)
    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 Popover)
    in Popover (created by WithStyles(Popover))
    in WithStyles(Popover) (created by TopBar)
    in div (created by TopBar)
    in div (created by TopBar)
    in div (created by TopBar)
    in TopBar (created by Connect(Component))
    in Connect(Component) (created by Route)
    in Route (created by withRouter(Connect(Component)))
    in withRouter(Connect(Component)) (created by App)
    in div (created by App)
    in MuiThemeProvider (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App (created by Connect(AppComponent))
    in Connect(AppComponent)
    in Provider
printWarning @ warning.js?dfb8:33
warning @ warning.js?dfb8:57
checkPropTypes @ checkPropTypes.js?12cb:52
validatePropTypes @ react.development.js?99ee:1233
createElementWithValidation @ react.development.js?99ee:1321
render @ withTheme.js?303b:84
finishClassComponent @ react-dom.development.js?cada:8389
updateClassComponent @ react-dom.development.js?cada:8357
beginWork @ react-dom.development.js?cada:8982
performUnitOfWork @ react-dom.development.js?cada:11814
workLoop @ react-dom.development.js?cada:11843
renderRoot @ react-dom.development.js?cada:11874
performWorkOnRoot @ react-dom.development.js?cada:12449
performWork @ react-dom.development.js?cada:12370
performSyncWork @ react-dom.development.js?cada:12347
interactiveUpdates @ react-dom.development.js?cada:12597
interactiveUpdates @ react-dom.development.js?cada:1958
dispatchInteractiveEvent @ react-dom.development.js?cada:4259

warning.js?dfb8:33
Warning: Failed prop type: Invalid prop `timeout` supplied to `Transition`.
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Popover)
    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 Popover)
    in Popover (created by WithStyles(Popover))
    in WithStyles(Popover) (created by TopBar)
    in div (created by TopBar)
    in div (created by TopBar)
    in div (created by TopBar)
    in TopBar (created by Connect(Component))
    in Connect(Component) (created by Route)
    in Route (created by withRouter(Connect(Component)))
    in withRouter(Connect(Component)) (created by App)
    in div (created by App)
    in MuiThemeProvider (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App (created by Connect(AppComponent))
    in Connect(AppComponent)
    in Provider
printWarning @ warning.js?dfb8:33
warning @ warning.js?dfb8:57
checkPropTypes @ checkPropTypes.js?12cb:52
validatePropTypes @ react.development.js?99ee:1233
createElementWithValidation @ react.development.js?99ee:1321
render @ Fade.js?dec3:104
finishClassComponent @ react-dom.development.js?cada:8389
updateClassComponent @ react-dom.development.js?cada:8357
beginWork @ react-dom.development.js?cada:8982
performUnitOfWork @ react-dom.development.js?cada:11814
workLoop @ react-dom.development.js?cada:11843
renderRoot @ react-dom.development.js?cada:11874
performWorkOnRoot @ react-dom.development.js?cada:12449
performWork @ react-dom.development.js?cada:12370
performSyncWork @ react-dom.development.js?cada:12347
interactiveUpdates @ react-dom.development.js?cada:12597
interactiveUpdates @ react-dom.development.js?cada:1958
dispatchInteractiveEvent @ react-dom.development.js?cada:4259

[oliviertassinari]

It a regression introduced by #11657.

[oliviertassinari]

@arteniioleg @DominikSerafin Thanks for raising.