Skip to content

fix(remix): scroll a long RemixMenu - #345

Open
leoafarias wants to merge 2 commits into
fix/remix-select-scrollfrom
fix/remix-menu-scroll
Open

leoafarias wants to merge 2 commits into
fix/remix-select-scrollfrom
fix/remix-menu-scroll

Conversation

@leoafarias

Copy link
Copy Markdown
Collaborator

Description

A RemixMenu panel taller than its overlay, or taller than a maxHeight on the overlay style, overflowed the item column (A RenderFlex overflowed by N pixels) instead of scrolling. Submenus reuse the panel and overflowed the same way.

Menu panels, root and submenus, now scroll their items. This is the same behavior #341 gives RemixSelect:

  • Padding, decoration, constraints, and containerEffects of the overlay box stay in place while the items scroll, and a maxHeight on overlay is honored.
  • A menu that fits keeps the size of its items and its intrinsic width.
  • Arrow keys reveal the focused item.
  • Checkbox items, radio groups, dividers, and submenu triggers work inside a scrolling panel. A submenu opens beside an item that is partly scrolled out of view and follows it while the panel scrolls.
  • The scroll view uses primary: false, stops scroll notifications at the panel, clamps at the ends with no overscroll effect, and keeps the desktop scrollbar.

The scroll structure now lives in one place. The internal RemixFlexBoxAdapter gains a scrollable option, and both RemixMenu and RemixSelect use it. This replaces #341's private _ScrollableOptions; select layout is unchanged, and #341's tests are untouched.

The item column now sizes to its content inside the scroll view, so mainAxisAlignment and mainAxisSize.max on overlay no longer distribute free vertical space. The changelog notes this. docs/components/menu.mdx gains a short "Long menus" section.

Validation

  • New menu_scroll_test.dart (22 tests). It covers:
    • scrolling past the overlay and past a maxHeight, and intrinsic width;
    • chrome and container effects staying put;
    • arrow keys;
    • the host primary controller, host notifications, and the AppBar;
    • no stretch or bounce, and the desktop scrollbar;
    • scroll semantics;
    • checkbox, radio, and divider items;
    • submenu placement beside a partly scrolled item, a submenu following scroll, and a long submenu.
  • 22 of 24 cases fail without the fix. The other two guard behavior that must not change. Reverting each piece of the shared scroll view fails its menu and select tests.
  • A new adapter test checks that the scroll position survives a toggle of the effects route.
  • packages/remix full suite: 2872 passed. registry_source: 1390 passed.
  • dart analyze packages/remix, root dart format, melos run ci:checks, and melos run docs:check: pass.
  • Merged onto stack/follow-ups-integration (chore: integration check for the follow-up stack (do not merge) #339), the full remix suite passes (3124). Home and End reveal the target there because fix(naked_ui): scroll keyboard focus targets into view in overlays, tabs, toggle groups, and menubars #344 is included.

Merge note

Stacked on #341. Merge #341 first, then retarget this PR to main. The only textual conflict with the rest of the stack is docs/components/menu.mdx; keep both sections. After #331 lands, the menu focus-ring note and skills/building-remix-design-system/references/components.md must also say that a scrolling list crops an outside row ring at its edges, whatever the panel's padding. The integration branch shows the wording.

Related Issues

Follows #341. Home and End reveal the target only with #344. A panel can still take the whole overlay height and cover its trigger; that is naked_ui positioning and is tracked separately.


Checklist

  • My PR includes unit or integration tests for all changed/updated/fixed behaviors.
  • I have updated or added relevant documentation (doc comments with ///).
  • I am prepared to follow up on review comments in a timely manner.

Breaking Change

  • Yes, this is a breaking change.
  • No, this is not a breaking change.

RemixFlexBoxAdapter is internal, so there is no API change. mainAxisAlignment and mainAxisSize.max on a menu's overlay style no longer distribute free vertical space, as for the select in #341.

A RemixMenu panel, and every submenu panel, rendered its items in a column
with no scroll view, so a list taller than the overlay or than a maxHeight on
the overlay style overflowed.

RemixFlexBoxAdapter gains a scrollable option that puts a contained vertical
scroll view between the box and its column. The box's padding, decoration,
constraints, and effects frame the scroll view. The scroll view does not attach
to the host's primary scroll controller, does not notify the host page, and
clamps at the ends. RemixMenu and RemixSelect both use it, which replaces the
select's private scroll structure.
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-27T15:31:32.120799Z d1f7bf4 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

This branch has not been deployed

No deployments
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

Successfully merging this pull request may close these issues.

1 participant