Menu fails to reposition itself inside the window in some circumstances.

[DeadWisdom]

What is affected?

Component

Description

When I open my md-menu component that is anchored on the button at the top right of the screen, I expect it to neatly position inside...

Unfortunately it appears off the screen:

I worked out the reason is thus:

• When the menu component is updated, and the menu is open
• The SurfacePositionController updates its position
• It does this by setting it's opacity to 0 and quick paint to the screen to understand it's dimensions
• It then calculates its position relative to the window
• However! If adding the menu expands the content and therefore the inner width of the window, it calculates its position based on an incorrect size

I won't go into solutioning to much, but I believe the best idea is to store the window width before adding it to the screen.

Reproduction

I am unable to reproduce in the playground because it doesn't seem to position correctly there either.

But...

• Make a menu
• Put it in the top right corner
• Ensure that if it's container grows it would grow the innerWidth of the window

Workaround

I haven't figured out the best work around yet. I think for now I will probably just have the menu be fixed.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0.0

Browser/OS/Node environment

• Chrome 117.0.5938.149
• Windows 10
• npm 8.19.2
• node 16.18.1

[e111077]

Thanks for the detailed breakdown. It seems like we need to simply store the inner widths and heights before we display the menu with opacity: 0

[e111077]

Implemented your fix, but unable to verify. Please reopen if it doesn't solve the issue on next MWC release