Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SubMenu component doesn't use ContextMenuBase.ZIndex #121

Closed
rummelsworth opened this issue Apr 25, 2022 · 4 comments
Closed

SubMenu component doesn't use ContextMenuBase.ZIndex #121

rummelsworth opened this issue Apr 25, 2022 · 4 comments

Comments

@rummelsworth
Copy link

Describe the bug

Unlike the ContextMenu component, the SubMenu component doesn't use ContextMenuBase.ZIndex.

This can lead to situations where, for example, the context menu trigger is on the right side of the page, it opens up the context menu to the left, then opens up a submenu back to the right, the top-level menu text can appear on top of the submenu area. It can depend on the top-to-bottom order of the context menu items in the DOM, since z-index isn't specified for them. If the "underneath" item is after the submenu, you'll see the item's whole text on top of the submenu. If not, you'll at least see the little submenu arrow on top.

The natural way to fix this would be for the developer-user to set ZIndex on the ContextMenu as well as all SubMenus. This doesn't work because SubMenu ignores ZIndex despite having access to it.

To Reproduce

Steps to reproduce the behavior:

  1. Clone/download the repro repo here:
  2. Build & run the "bug repro" project (a Blazor WASM app).
  3. Right-click the trigger paragraph on the right side of the index page.
    • Make sure you right-click pretty close to the right edge of the paragraph, so that the submenu is forced to open to the left.
  4. Navigate to the submenu and then the sub-submenu.
  5. See the top-level menu elements appear on top of the sub-submenu area.

Expected behavior

Each submenu and all of its content should appear on top of all ancestor-ish menu content, at least as long as I'm properly setting the ZIndex property on all SubMenu components.

Screenshots

image

Desktop:

  • OS: Windows 10
  • Browser: Edge
  • Version: 100.0.1185.50 (Official build) (64-bit)

Additional context

The fix (or a workaround) appears to be as simple as adding the same z-index setting already in ContextMenu.razor to SubMenu.razor. The developer still has to arrange their own ZIndex values over the submenus, but that's probably not a big deal. Otherwise, the library itself would have to try to intelligently set the ZIndex values. Maybe that's easy? Dunno.

@stavroskasidis
Copy link
Owner

Thank you for your detailed report. I will fix asap

stavroskasidis added a commit that referenced this issue Apr 25, 2022
@stavroskasidis
Copy link
Owner

Fixed in 1.14. Thank you

@rummelsworth
Copy link
Author

Will v1.14 be releasing to nuget soon? There's no rush on my end, as I'd already taken a local fork of v1.13 to put the little fix into. Just curious. Thanks again!

stavroskasidis added a commit that referenced this issue Apr 27, 2022
@stavroskasidis
Copy link
Owner

Ha forgot to merge the PR. Thanks for the reminder

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants