Repository navigation
fix(react-headless-components-preview): constrain menu height and enable internal scrolling - #37005
Open
Paul Mardling (PaulGMardling) wants to merge 4 commits into
Conversation
Expose a headless-owned data-cover-target marker from shared positioning, with lifecycle cleanup and consumer-attribute reconciliation. Cover component composition, nesting, geometry and keyboard behavior. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
Default menus to height autosizing and internal overflow scrolling. Compute available dimensions across permitted native placements, preserve covering geometry and consumer overrides, and keep retained focus visible when the viewport shrinks. Add shared size support, browser regressions and API documentation. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Paul Mardling (PaulGMardling)
changed the title
Paul Mardling (PaulGMardling)
marked this pull request as ready for review
October 26, 2026 16:06
Paul Mardling (PaulGMardling)
changed the title
Paul Mardling (PaulGMardling)
changed the title
Paul Mardling (PaulGMardling)
changed the title
… align browser tests Share axis calculations and viewport listener setup without changing autosize behavior or bundle thresholds. Run compatibility suites in Chrome with the existing focusgroup polyfill, while retaining explicit native focusgroup coverage. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
…nd resize observation Normalize CSS zoom coordinates, select compatible two-axis placement limits, and observe absolute containing-block changes. Consolidate positioning observation and add browser and unit regressions for all three review findings. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previous Behavior
Long menus can leave keyboard-focused items off-screen in short viewports.
New Behavior
Headless Menu constrains its height and scrolls focused items into view, including after resizing. Styled consumers inherit the fix without positioning adapters or sizing CSS. Covering menus stay content-sized; native fallbacks and consumer overrides are preserved.
Before / after
320x240, light/LTR, macOS Chrome 155; End focuses Item 40 in both images. Same consumer fixture and styles; before uses headless 0.3.1, after uses this PR's implementation.
Verified: 1,729 unit tests, both React 17/18 browser suites, native Menu navigation, and 14 styled-consumer scenarios passed. Bundle comparison passes without changing thresholds. Existing skips/pending cases remain; no screen-reader or cross-platform verification is claimed.
Reproduction and validation commands
Use an isolated checkout of this PR and run
yarn install --immutable. OpenMenu.cy.tsxwithyarn nx run react-headless-components-preview:e2e --configuration=local. In a 320x240 long-menu case, focus Actions, open with Enter, and navigate to Item 40: it must be visible through internal scrolling with no page scroll. Escape must close and return focus.Commands run successfully:
Compatibility suites use Chrome with the focusgroup polyfill; native navigation is checked separately. The built candidate was verified in the styled consumer through external bundler aliases, not an installed fixed release. A release containing this fix is still required for normal dependency adoption.
Related Issue(s)