Skip to content

[material_ui] Stop MenuAnchor from covering its anchor - #12851

Open
RootHex200 wants to merge 1 commit into
flutter:mainfrom
RootHex200:fix-161474-menu-anchor-overlap
Open

[material_ui] Stop MenuAnchor from covering its anchor#12851
RootHex200 wants to merge 1 commit into
flutter:mainfrom
RootHex200:fix-161474-menu-anchor-overlap

Conversation

@RootHex200

@RootHex200 RootHex200 commented Sep 12, 2026

Copy link
Copy Markdown
Contributor

When a menu opens upwards and it is too tall to fit above its button, the menu is pushed down to the bottom edge of the screen and covers the button completely. You cannot see the button you just tapped.

The reason is that MenuAnchor only limited the menu height to the size of the whole screen. But a menu can only use the space above the button or the space below it, never both. So when the menu did not fit above, the positioning code ran out of options and pinned it to the bottom edge, right on top of the button.

Now the menu height is limited to the bigger of those two spaces. A menu that is taller than that becomes shorter and scrolls, instead of growing over the button.

Addresses flutter/flutter#161474

before:
before

after:
after

I added a test in test/menu_anchor_test.dart that puts a menu at the bottom of a short screen and checks that the bottom of the menu never goes past the top of the button.

Pre-Review Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

A vertical menu is placed either above or below its anchor, but its height
was only capped to the size of the whole overlay. When a menu was too tall
to fit above an anchor near the bottom of the screen, the positioning logic
fell through to pinning the menu to the bottom edge, which drew it straight
over the anchor and hid it completely.

Cap the height of a vertical menu to the larger of the space above and the
space below the anchor, using the same bounds the positioning logic uses.
A menu that no longer fits is shortened and scrolls instead of growing past
the anchor.

Addresses flutter/flutter#161474
@github-actions github-actions Bot added p: material_ui triage-design Should be looked at in design triage labels Sep 12, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request modifies the getConstraintsForChild method in _MenuLayout to cap the height of vertical menus to the available space above or below the anchor, preventing the menu from covering the anchor when it is too tall. It also adds a corresponding regression test and a changelog entry. There are no review comments, and I have no feedback to provide.

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

Labels

p: material_ui triage-design Should be looked at in design triage

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant