Rmwc: Menu run time error when used within Dialog and hoistToBody is true

[majames]

Code Sandbox Repro: https://codesandbox.io/s/32qy2lv395

RMWC Version: 5.3.1

Build system: Webpack 4, TypeScript

Bug Description

Render the basic example for using @rmwc/menu within a <Dialog /> component and set hoistToBody={true}. This will result in the following stack traces in the console (see code sandbox)

mdc.menuSurface.js:706 Uncaught TypeError: Cannot read property 'height' of undefined
    at MDCMenuSurfaceFoundation.getOriginCorner_ (mdc.menuSurface.js:706)
    at MDCMenuSurfaceFoundation.autoPosition_ (mdc.menuSurface.js:636)
    at MenuSurface.hoistMenuToBody (menu-surface.js:257)
    at eval (menu-surface.js:233)
    at MenuSurface.FoundationComponent.syncProp (foundation-component.js:245)
    at MenuSurface.sync (menu-surface.js:232)
    at MenuSurface.FoundationComponent.componentDidMount (foundation-component.js:222)
    at MenuSurface.componentDidMount (menu-surface.js:91)
    at commitLifeCycles (react-dom.development.js:14685)
    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)
    at completeRoot (react-dom.development.js:17463)

The above error occurred in the <MenuSurface> component:
    in MenuSurface (created by Menu)
    in Menu (created by Sandbox)
    in div (created by MenuSurfaceAnchor)
    in div (created by DialogContent)
    in div (created by Dialog)
    in div (created by Dialog)
    in div (created by DialogRoot)
    in Dialog (created by Sandbox)
    in Sandbox

Looks like the surfaceSize object is undefined but haven't chased it further than that...

[jamesmfriedman]

Thanks for the repro! Took me a minute to realize that the sandbox wasn't broken and that was the actual issue. Wish I could find away around the cross origin react errors. I'll take a look.

[jamesmfriedman]

fixed in 5.4.0

[majames]

Thanks!! 🚀

[nikhilbatta]

Still getting this error with 5.7.2 @rmwc/menu

[liamcmitchell-sc]

The fix in 5.7.2 isn't reliable. There is a race condition between the foundation code that sets dimensions_ in an animation callback (https://github.com/material-components/material-components-web/blob/v3.2.0/packages/mdc-menu-surface/foundation.ts#L180) and the RMWC code to reposition after hoisting to body in a timeout callback (https://github.com/jamesmfriedman/rmwc/blob/v5.7.2/src/menu/menu-surface.tsx#L300). The different callbacks don't always run in the same order. If the timeout callback runs first, you will see the above error.

Looks like this is fixed in v6 by repositioning inside a try/catch.

I have worked around this in v5 by rendering first with open={false} then after update, re-rendering with open={true}.

[jamesmfriedman]

There something preventing you from upgrading to v6 @liamcmitchell-sc ?

[liamcmitchell-sc]

Hooks, we're a bit behind on React versions :)