[Bug] Clicking around a bottom area of a Menu could click on one of its child MenuItems at random

[klaritan]

I realized Menu is a bit buggy.

If you click and hold on like 1~2px away from the very bottom, the menu will disappear as soon as you stop holding. This may be minor, but if you press and release very fast, it randomly clicks on one of the menu items when menu is being animated to drop down.

The demo could be a very good way to see what I mean: https://i.imgur.com/cBilajC.png

[jespersh]

I think I see what you mean. The menu items shouldn't be clickable until the menu is fully expanded.

1. Click and hold mouse on File menu.
2. Quickly move mouse down to where menu will appear.
3. Quickly release for a random menu item click.

[Keboo]

So I believe there are two issues here:

1. Pressing and holding in the bottom ~2px gives different behavior than the rest of the menu
2. Sub items can be mistakenly clicked when the menu is opening.

So looking at #1, I suspect the issue is simply around margin/placement of controls. The first step will be figuring out exactly which controls are handling the mouse events and what the difference is between then. snoop is a great tool for this since it can show you the routed mouse events along with which control is handling them.

For #2, the first thing that would be good to do is test with the default WPF style and verify that this is in fact an issue with the MDIX style. Assuming that is the case I suspect the issue is around the relative placement of the header content and the popup. Looking at the default style I am noticing that the menu header is getting a vertical margin of 3. Which may be to keep this issue from happening; testing will be needed to know for sure.

    <Grid>
      <ContentPresenter Margin="6,3,6,3"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
      <Popup x:Name="Popup"
             Placement="Bottom"
             IsOpen="{TemplateBinding IsSubmenuOpen}"
             AllowsTransparency="True"
             Focusable="False"
             PopupAnimation="Fade">
        ...
      </Popup>
    </Grid>

[klaritan]

So I believe there are two issues here:

1. Pressing and holding in the bottom ~2px gives different behavior than the rest of the menu

2. Sub items can be mistakenly clicked when the menu is opening.

So looking at #1, I suspect the issue is simply around margin/placement of controls. The first step will be figuring out exactly which controls are handling the mouse events and what the difference is between then. snoop is a great tool for this since it can show you the routed mouse events along with which control is handling them.

For #2, the first thing that would be good to do is test with the default WPF style and verify that this is in fact an issue with the MDIX style. Assuming that is the case I suspect the issue is around the relative placement of the header content and the popup. Looking at the default style I am noticing that the menu header is getting a vertical margin of 3. Which may be to keep this issue from happening; testing will be needed to know for sure.

    <Grid>
      <ContentPresenter Margin="6,3,6,3"
                        ContentSource="Header"
                        RecognizesAccessKey="True" />
      <Popup x:Name="Popup"
             Placement="Bottom"
             IsOpen="{TemplateBinding IsSubmenuOpen}"
             AllowsTransparency="True"
             Focusable="False"
             PopupAnimation="Fade">
        ...
      </Popup>
    </Grid>

Thanks a lot, Keboo.

Upon more testing, it looks like with MDIX, when the menu is dropping, it is appearing 1 ~ 3px higher than it should, and it corrects itself after it is fully expanded.

This is happening on all popups of MenuItem (including submenus).

I'm quite overwhelmed as to where I should take a look at to fix this 3px margin that's causing all this. Any tips on which source code I should take a look at?

[Keboo]

@klaritan I would start with the MenuItem Style. Specifically take a look at the Popup control and its usages. Perhaps this trigger?

[mgnslndh]

The trigger adjust the margin to make the shadow visible. Removing the trigger or making it set the margin to zero will resolve the issue but the shadow will go away. Not sure how to proceed from here.