Keep a floating panel on the side it opened on - #387
Merged
Conversation
A panel whose content resizes while it is open hands floating-ui's flip() a new answer on every keystroke. Open the country picker near the bottom of the page and it goes upward for want of room below; narrow the list by typing and it now fits below, so flip moves it there; clear the query and it stays below, overflowing. The facet popovers have the same shape and more triggers for it: a search box, collapsible sections, an expanding tree, and a header that only a top-side popover carries, so a flip changes the height that decided it. useFloatingPanel now owns the offset/flip/shift/size chain for every panel and takes pinSide, which settles the side as the panel opens and drops flip from the chain outright. Dropping it is what makes the pin hold: floating-ui keeps the chain it was first given unless a new one differs, and it compares each rule's function by source text, so a flip left in place with different options would be ignored. A shorter chain is the difference it does notice. That same comparison had frozen the facets' size rule at mount, so its capture of the filtered count never moved and the popover's min-height was stuck at whatever the first render saw. The hook reads the caller's rule through a ref whose wrapper never changes shape, which unfreezes it. Pinning first is what makes that safe. Select comes off Headless UI's anchor prop for the same reason: it applies an unconfigurable flip and AnchorProps has no way to say otherwise. Both selects now share use-select-panel, so select-parts is dressing only. Tooltips pass pinSide: false. Their content is fixed, so nothing they do can hand flipping a new answer, and re-flipping is what keeps them on screen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
A panel whose content resizes while it is open hands floating-ui's
flip()a new answer on every keystroke. Open the country picker near the bottom of the page and it goes upward for want of room below; narrow the list by typing and it now fits below, so flip moves it there; clear the query and it stays below, overflowing.The facet popovers have the same shape and more triggers for it: a search box, collapsible sections, an expanding tree, and a header that only a top-side popover carries, so a flip changes the very height that decided it.
useFloatingPanelnow owns the offset/flip/shift/size chain for every floating panel and takespinSide, which settles the side as the panel opens and dropsflipfrom the chain outright. Dropping it is what makes the pin hold: floating-ui keeps the chain it was first given unless a new one differs, and it compares each rule's function by source text, so aflipleft in place with different options would be ignored. A shorter chain is the difference it does notice.That same comparison had frozen the facets'
sizerule at mount, so its capture of the filtered count never moved and the popover's min-height was stuck at whatever the first render saw. The hook reads the caller's rule through a ref whose wrapper never changes shape, which unfreezes it. Pinning first is what makes that safe, and the facet popover's min-height now moves as the list filters.Selectcomes off Headless UI'sanchorprop for the same reason: it applies an unconfigurableflip()andAnchorPropsoffers no way to say otherwise. Both selects now shareuse-select-panel, soselect-partsis dressing only.Tooltips pass
pinSide: false. Their content is fixed, so nothing they do can hand flipping a new answer, and re-flipping is what keeps them on screen when the layout shifts underneath.🤖 Generated with Claude Code