feat(Select): add position prop & align-item#1954
Open
maxffarrell wants to merge 20 commits into
Open
Conversation
|
Contributor
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
huntabyte
reviewed
Feb 19, 2026
huntabyte
reviewed
Feb 19, 2026
Owner
CleanShot.2026-02-19.at.14.55.28.mp4This is close, but it needs to account for the scroll buttons potentially being there. I would expect clicking on the trigger and then again quickly without moving my mouse it would hit the selected item and not the scroll button. I will give this a more thorough review when I have some time, as I see some things in the constructor etc that look like they are causing extra work even when the position is not item-aligned. Thank you! |
maxffarrell
force-pushed
the
select-align-item
branch
from
7e4bc25 to
5c7ec55
Compare
maxffarrell
force-pushed
the
select-align-item
branch
from
70d64d3 to
515b709
Compare
huntabyte
added
the
publish:preview
commit: |
Adds documentation, API reference, and demo scaffolding for the upcoming `position="item-aligned"` feature. Implementation removed — will be re-ported from Radix UI. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Ports the exact SelectItemAlignedPosition algorithm from Radix UI's select.tsx. Uses a two-div structure (fixed wrapper + content) with direct DOM style writes, matching Radix's approach: - Aligns the selected item's center vertically with the trigger's center - Aligns the item's left edge with the trigger value node's left edge - Expands the content wrapper as the user scrolls (shouldExpandOnScroll) - Repositions once when scroll buttons appear (handleScrollButtonChange) - Closes the select on window resize (Radix behaviour) Also adds `getAllItemNodes()` to SelectBaseRootState to correctly detect first/last items (including disabled) for edge padding calculations. Combobox content types omit `position` since item-aligned doesn't apply when filtering by typing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
maxffarrell
force-pushed
the
select-align-item
branch
from
b000cac to
0fd1101
Compare
…d last item - Replace viewport.offsetTop + itemOffsetMiddle with a getBoundingClientRect-based measurement for viewportTopToItemMiddle. When the content element is position:relative it becomes the offsetParent and viewport.offsetTop excludes the content's border-top, causing a systematic 1-2px downward shift. The rect subtraction cancels the absolute position and gives the exact relative offset regardless of CSS position. - In the expandsUpward=false branch, detect when viewport.scrollTop is clamped (last item in a long list can't scroll far enough) and shift the content wrapper upward by the uncovered difference so the selected item stays on the trigger center. - Simplify #repositionOnScroll to a pure BoundingClientRect delta: move the content wrapper by (triggerCenterY - itemCenterY) on each page scroll event instead of recomputing from the offsetTop/scrollTop formula, keeping it consistent with the new measurement strategy. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Remove pageX/pageY (not in PointerEventInit) and fix union type complexity by casting render args in the item-aligned test helpers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
Author
|
Working on one last bug, misalignment when last item is selected |
maxffarrell
force-pushed
the
select-align-item
branch
from
ce4f44e to
2acd445
Compare
…s trailing scroll-down arrow In item-aligned mode, setHighlightedNode's scrollIntoView call was racing the positioner and shifting the selected item ~8px from the trigger. Skip that scroll when item-aligned is active. Additionally, when the last item is at the trigger position the algorithm leaves a tiny strip of scrollable space below it; suppress the scroll-down arrow when there is no next item to scroll to so the menu visually ends at the last item's bottom edge. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…elpers The dismissable layer attaches its document-level pointerdown listener via setTimeout(1) to skip the bootstrapping pointerdown event. Tests that open the menu and immediately click outside can race this delay, leaving the listener unattached when the click fires. Add a vi.waitFor on globalThis.bitsDismissableLayers in the open helpers so subsequent outside clicks reliably hit the dismiss handler. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Contributor
Author
|
It's working for the most part, but there can be some odd behavior when scrolling page. It lost the anchor once when I scrolled the page up and down fast enough with the menu open, but hard to repro |
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
2 participants
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.
No description provided.