MudMenu Fails to Close When Translated: Remains Open on Page Clicks

[Schlutzkrapfen]

Things to check

• I have searched the existing issues for this bug
• To rule out a caching problem I made sure the bug also happens in an incognito tab

Bug type

Component

Component name

MudMenu

What happened?

When a MudMenu is opened within an element (or a parent element) that has style: transform: translate(...), the menu fails to close when clicking anywhere on the page. Instead, it only closes when clicking within its parent element or when clicking the buttons.

Expected behavior

It should close everywhere when you click somewhere

Reproduction link

https://try.mudblazor.com/snippet/GkmyFEPynPJEgTQh

Reproduction steps

1.Make a MudMenu
2.give it the style: transform: translate(0px, 0px)
3.Click on the MudMenu
4.Try to close it.

Relevant log output

No response

Version (bug)

7.11.0 6.21.0

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct

[jgoday]

The problem here seems to be related with the css transform property.
As pointed in the css spec (https://www.w3.org/TR/css-transforms-1/#propdef-transform),

For elements whose layout is governed by the CSS box model,
any value other than none for the transform property also causes the element
to establish a containing block for all descendants.
Its padding box will be used to layout for all of its absolute-position descendants,
fixed-position descendants, and descendant fixed background attachments.

So, in this example, maybe a simple ad-hoc/local solution (that does not require changes in mudblazor) is to set inners mud-overlay width/height
properties to 100vw/100vh, respectively.

.mud-overlay {
  width: 100vw;
  height: 100vh;
}

Another solution, could be to create a new OverlaySectionName property in MudMenu, to allow render mud-overlay outside the mud-menu hierarchy, so that it cannot be affected by custom transformations.
Like

<SectionOutlet SectionName="menu-overlay" />

<MudMenu
    style="Background:blue;transform:translate(0px,0px);"
    OverlaySectionName="menu-overlay">
    <MudMenuItem>
        Save
    </MudMenuItem>
</MudMenu>

@Schlutzkrapfen
What do you think? is it worth implementing the OverlaySectioName property?
or is the ad-hoc (css) solution enough?

[Schlutzkrapfen]

@jgoday Thank you for your response! It would be nice if this could be implemented directly in MudBlazor, as it causes behavior that isn't intendet. It is like extra work for anyone who encounters the bug.

[jgoday]

@jgoday Thank you for your response! It would be nice if this could be implemented directly in MudBlazor, as it causes behavior that isn't intendet. It is like extra work for anyone who encounters the bug.

Sorry for the delay, just created a PR (#10188) that adds an optional parameter (OverlaySection) to avoid css-transform problem

[versile2]

https://try.mudblazor.com/snippet/GucePwveviVQDAsE is an up to date snippet. Note V8 will not show MudMenu's with no label or Activation Context