rmwc
Menu.renderToPortal broken in 8.0.0
Using Menu.renderToPortal causes the menu to appear at the top left of the page instead of being placed by the MenuSurfaceAnchor.
Console error:
portal.tsx:32 No default Portal found. Did you forget to include it in the root of your app? 'import { Portal } from "@rmwc/base";'
This bug is visible in the documentation
- visit https://rmwc.io/menus
- scroll down to the Rendering through Portals section
- Click Open Menu button
- Scroll to the top and you will find the open menu at the top left of the page
Observations I have managed to fix the console error in some cases by setting renderToPortal with a ref to an element elsewhere in the component. However it still renders in the wrong position.
I upgraded to 8.0.0 from 6.1.4. This bug wasn't present in v6.
I dug around and there were some interesting things I observed, but I am not sure what exactly is causing it. Here's a video of what I saw. Maybe some of you might have an idea. https://www.loom.com/share/81c254057a234818971e1b317fc35c46
I made this codesandbox with the issue in isolation. https://codesandbox.io/s/rmwc-typescript-sandbox-forked-ikujd9?file=/src/index.tsx
I upgraded from 6.1.4 to 8.0.3 a few weeks ago in one of my projects, and I'm also experiencing this issue same issue with menus opening in the wrong position when rendering through the portal.
Has anyone found a workaround for this bug?
Sadly I currently do not know of any fix, other than not rendering to portal. But I will look into fixing this asap!
For me rendering the menu from within a ListItem was breaking the positioning. To solve I ended up replacing the ListItem with a div with ListItem-like styles.
I created another codesandbox to help debug this issue. This sandbox is forked from @b-d-m-p's sandbox but was refactored to use React 18.2.0, Typescript, the individual RMWC packages instead of the entire library, and into separate files for easy reading.
Instructions to recreate the issue is located on the page in the sandbox. https://codesandbox.io/s/rmwc-menu-8-0-3-rendertoportal-bug-9uelb7?file=/src/MenuTest.tsx
Interestingly, I can't seem to recreate the exact placement of the menu in the portal like occurs in the documentation or in my project. However, the sandbox does at least demonstrate the placement issue.
It's also noteworthy that the error only occurs in this sandbox when the renderToPortal prop is defaulted to true. If you toggle it at runtime, the menu renders through the portal as expected.
Temp workaround, downgrade menu dep to 7. Started looking into this as well. Thinking there is breaking change in the version of material dependency. The menu foundation position isn’t respecting the anchor location. Anchor location values are wrong.
Temp workaround, downgrade menu dep to 7. Started looking into this as well. Thinking there is breaking change in the version of material dependency. The menu foundation position isn’t respecting the anchor location. Anchor location values are wrong.
@baraya, Do you know if @rmwc/[email protected] will play well with all of the other @rmwc v8 components?
EDIT: I quickly tested downgrading only @rmwc/menu to 7.0.3 and the menus are working as I would expect. Not sure if there could be conflicts with other components, but the menus are at least rendering in the expected location when using the portal.
@kintz09 I haven’t seen any issues in my project. I’m going this route until I get some free time. Still hoping for a workaround on v8. Without a patch, I’m struggling on how to get a handle to the surface api ref to set the anchor.
Okay I spend a couple of hours debugging the menu-surface. Only thing I found out is that the anchor is null. So somehow the anchor is not being set, which leads the menu to position itself to the top left corner. Let me know if anyone is up for a debug session together! I could explain my findings (and maybe a bit of rubber ducking could work)