Skip to content

MudMenu: Fix pointer event timing with cascading menus#10551

Merged
danielchalmers merged 2 commits intoMudBlazor:devfrom
danielchalmers:menu-nested-timings
Jan 3, 2025
Merged

MudMenu: Fix pointer event timing with cascading menus#10551
danielchalmers merged 2 commits intoMudBlazor:devfrom
danielchalmers:menu-nested-timings

Conversation

@danielchalmers
Copy link
Member

Description

Improves code readability, fixes potential rendering desync, optimizes method calls, and fixes this:

Video3.mp4

How Has This Been Tested?

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added bug Unexpected behavior or functionality not working as intended PR: needs review labels Jan 3, 2025
@codecov
Copy link

codecov bot commented Jan 3, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.56%. Comparing base (f7f07fe) to head (6dfc439).
Report is 1 commits behind head on dev.

Additional details and impacted files
@@           Coverage Diff           @@
##              dev   #10551   +/-   ##
=======================================
  Coverage   91.55%   91.56%           
=======================================
  Files         426      426           
  Lines       13305    13308    +3     
  Branches     2565     2567    +2     
=======================================
+ Hits        12182    12185    +3     
  Misses        548      548           
  Partials      575      575           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@danielchalmers danielchalmers changed the title MudMenu: Fix timing issues with multiple cascading menus MudMenu: Fix pointer event timing with cascading menus Jan 3, 2025
@dennisrahmen
Copy link
Contributor

@danielchalmers one additional optimization would be to switch the side where the menu opens depending on the available width.

Currently they start to overlap, chrome for example opens to the left and then to the right and then to the left again.

That way the last two layers are always visible and not overlapping.

@danielchalmers
Copy link
Member Author

@danielchalmers one additional optimization would be to switch the side where the menu opens depending on the available width.

Currently they start to overlap, chrome for example opens to the left and then to the right and then to the left again.

That way the last two layers are always visible and not overlapping.

Do you have a screenshot for reference? @dennisrahmen

@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 3, 2025

@danielchalmers danielchalmers merged commit ba6f33d into MudBlazor:dev Jan 3, 2025
6 checks passed
@danielchalmers danielchalmers deleted the menu-nested-timings branch January 3, 2025 15:09
@dennisrahmen
Copy link
Contributor

@danielchalmers if you check out the example and open the second layer "Format" and then try to open "Points" you have to be fast otherwise it just opens "Text" and that overlaps with the options of the second layer.

Aufzeichnung.2025-01-03.194106.mp4

In comparison the browser menu alternates to which side it opens the new layer. That way the new layer is never in the way even when you are slow or just want to check what menu the option you are searching for is in.

Aufzeichnung.2025-01-03.194652.mp4

@danielchalmers
Copy link
Member Author

@versile2 What do you think about @dennisrahmen's idea above and the complexity of adding it?

@versile2
Copy link
Contributor

versile2 commented Jan 3, 2025

well I envision it would be handled in C# to alternate transformorigin. Nullable like AnchorOrigin so they can override it but otherwise alternate left/right on a nested menu. The popover stuff would do what it does now. Honestly I wish it wouldn't make them all the same width too but that might be customizable.

@versile2
Copy link
Contributor

versile2 commented Jan 3, 2025

But in either case assuming they set the transform and anchors on every nest they could control it.

@dennisrahmen
Copy link
Contributor

@versile2

so they can override it

Do they need to override it?

The menu that opens from the activator, so the first layer, it does not matter where it opens.
The second layer can always open to the right, or left for LTR, only after that it has to alternate and since we know that the second layer will open to the right the third can always open to the left and so on.

I would consider this normal behaviour for every menu in that style I have ever used.
Only exception is that some open always to the right except when there is not enough screen space, then they open the next layer to the left.

@versile2
Copy link
Contributor

versile2 commented Jan 3, 2025

No, they don't have to override it, but we've specifically allowed them to override AnchorOrigin so I presumed we could allow them to override TransformOrigin here as well using the same method.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants