fix(SelectPanel): Correctly recalculate position on overflow by francinelucca · Pull Request #5562 · primer/react

francinelucca · 2025-01-17T05:02:04Z

Closeshttps://github.com/github/primer/issues/4027

Continuation of #5207.

When the selectPanel grows after opening (example: open in loading state, data is fetched, items are rendered), the position is not recalculated and may cause content to go off screen (See for more context https://github.com/github/primer/issues/4027). This PR corrects that undesired behavior by recalculating the position of the overlay on size change. Additionally, bake in logic so that the overlay retains it's size on filtering when anchored to the top (to prevent the panel from repositioning itself too many times).

before

Screen.Recording.2025-02-05.at.6.18.57.PM.mov

Screen.Recording.2025-02-05.at.6.19.47.PM.mov

after

Screen.Recording.2025-02-05.at.6.26.39.PM.mov

Screen.Recording.2025-02-05.at.6.21.45.PM.mov

Changelog

New

AnchoredOverlay dev stories for content resizing within page and dialog.
Support for pinPosition prop in AnchoredOverlay to prevent position shifting when sitting at the top of the anchor.
Support 'anchorSide' prop through 'overlayProps' in AnchoredOverlay
Adds max-height: 100vh default to AnchoredOverlay.
SelectPanel example stories for content resizing within page and dialog.
Support for width overlay prop in SelectPanel
Set pinPosition to true in SelectPanel if height hasn't been set by user
Added resizeObserver to useAnchoredPosition to watch for changes within the floating element (i.e., the overlay)

Changed

Add logic to useAnchoredPosition's updatePosition function to prevent anchored element to unpin from the top when possible (dependent on pinPosition) prop
Slight refactor in useResizeObserver hook
VRT updates (couldn't determine the source of these)

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Test new functionality in https://primer-88a2e13e51-13348165.drafts.github.io/storybook/?path=/story/components-selectpanel-examples--reposition-after-loading, https://primer-88a2e13e51-13348165.drafts.github.io/storybook/?path=/story/components-selectpanel-examples--select-panel-reposition-inside-dialog

Ensure default functionality still works as expected: https://primer-88a2e13e51-13348165.drafts.github.io/storybook/?path=/story/components-selectpanel--default

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-01-17T05:02:08Z

🦋 Changeset detected

Latest commit: c874e45

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-01-17T05:02:36Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-01-17T05:05:29Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.84 KB (+0.14% 🔺)
packages/react/dist/browser.umd.js	106.26 KB (+0.24% 🔺)

…ect-panel-overflow

francinelucca · 2025-02-04T03:31:30Z

 const floatingElementRef = useProvidedRefOrCreate(settings?.floatingElementRef)
 const anchorElementRef = useProvidedRefOrCreate(settings?.anchorElementRef)
 const [position, setPosition] = React.useState<AnchorPosition | undefined>(undefined)
+ const [_, setPrevHeight] = React.useState<number | undefined>(undefined)


used to force the height of the selectPanel when filtered and it wants to shrink but it's anchored at the top (we want it to stay at the top and lock the height)

francinelucca · 2025-02-04T03:32:13Z

+ if (
+ settings?.pinPosition &&
+ prev &&
+ ['outside-top', 'inside-top'].includes(prev.anchorSide) &&
+ (prev.anchorSide !== newPosition.anchorSide || prev.top < newPosition.top)


if the selectPanel is anchored to the top and it used to sit higher on the page....

francinelucca · 2025-02-04T03:32:55Z

+ (prev.anchorSide !== newPosition.anchorSide || prev.top < newPosition.top)
+ ) {
+ const anchorTop = anchorElementRef.current?.getBoundingClientRect().top ?? 0
+ if (anchorTop > (floatingElementRef.current?.clientHeight ?? 0)) {


if the anchorTop is bigger than the selectPanel's height, that means there is plenty of space for the selectPanel to stay at the top

francinelucca · 2025-02-04T03:33:39Z

+ if (anchorTop > (floatingElementRef.current?.clientHeight ?? 0)) {
+ setPrevHeight(prevHeight => {
+ if (prevHeight && prevHeight > (floatingElementRef.current?.clientHeight ?? 0)) {
+ requestAnimationFrame(() => {


using requestAnimationFrame here to prevent a resizeObserver loop here due to us changing the element's height, but the observer listening for changes in the element...

francinelucca · 2025-02-04T03:34:01Z

+ const anchorTop = anchorElementRef.current?.getBoundingClientRect().top ?? 0
+ if (anchorTop > (floatingElementRef.current?.clientHeight ?? 0)) {
+ setPrevHeight(prevHeight => {
+ if (prevHeight && prevHeight > (floatingElementRef.current?.clientHeight ?? 0)) {


re-establish the height if it used to be bigger and is now attempting to shrink

francinelucca · 2025-02-04T03:35:37Z

+ } else {
+ prev = newPosition


edgecase where the selectPanel is actually growing instead of shrinking, in this case we do want to allow it to recalculate/reposition

camertron

Wow, this is really good stuff, nice work! 🎉

I noticed a flicker in one of the after videos where the panel shrinks but then immediately grows again. What do you think it would take to remove the flicker?

camertron · 2025-02-06T17:51:02Z

+ settings?.pinPosition &&
+ prev &&
+ ['outside-top', 'inside-top'].includes(prev.anchorSide) &&
+ (prev.anchorSide !== newPosition.anchorSide || prev.top < newPosition.top)


Could we wrap this in a function and give it some comments so we know what's going on when we come back to the code in a few months?

camertron · 2025-02-06T17:52:31Z

+ const anchorTop = anchorElementRef.current?.getBoundingClientRect().top ?? 0
+ if (anchorTop > (floatingElementRef.current?.clientHeight ?? 0)) {


Same question: maybe wrap in a function with a nice, intention-revealing name and some comments?

emilybrick

Reviewing on behalf on design here - 👍

…ect-panel-overflow

github-actions · 2025-02-10T19:12:33Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

TylerJDev · 2025-02-11T13:44:25Z

 alignmentOffset,
 anchorOffset,
 className,
+ pinPosition,


Should we add this to AnchoredOverlay.docs.json?

Yes! Done!!

…ect-panel-overflow

github-actions · 2025-02-13T01:31:44Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-02-13T02:10:22Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-02-13T02:15:02Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-02-13T04:46:45Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-02-13T04:47:47Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-02-13T04:48:23Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-02-13T05:10:14Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

This reverts commit 8c1e8cf.

primer-integration · 2025-02-14T00:51:57Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/362265

primer-integration · 2025-02-14T01:11:35Z

🟢 golden-jobs completed with status success.

github-actions · 2025-02-14T02:03:28Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

francinelucca · 2025-02-14T02:28:08Z

@camertron cleaned up the useAnchoredPosition logic and split into functions, lmk how that looks.
As for the flashing, I tried a couple things with the visibility like you suggested but couldn't get it to bypass it. I think visibility won't help in this case because the flashing happens when the SelectPanel is already in view, user filter so SelectPanel shrinks, and then we re-establish the height when the useAnchoredPosition hooks runs again as a response to the element resizing

wip: SelectPanel overflow
80dfbfd

francinelucca added status: wip do not merge labels Jan 17, 2025

github-actionsBot added the staff Author is a staff member label Jan 17, 2025

github-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jan 17, 2025

francinelucca temporarily deployed to github-pages January 17, 2025 05:04 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5562 January 17, 2025 05:04 Inactive

Merge branch 'main' into francinelucca/select-panel-overflow
25920d6

francinelucca temporarily deployed to github-pages January 23, 2025 00:05 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5562 January 23, 2025 00:05 Inactive

Merge branch 'main' of github.com:primer/react into francinelucca/sel…
a47034c
…ect-panel-overflow

francinelucca temporarily deployed to github-pages February 3, 2025 22:19 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5562 February 3, 2025 22:20 Inactive

fix(useAnchoredPosition): refine reposition logic
b863080

francinelucca commented Feb 4, 2025
View reviewed changes

Comment threadpackages/react/src/hooks/useAnchoredPosition.ts Outdated

francinelucca commented Feb 4, 2025
View reviewed changes

francinelucca changed the title ~~wip: SelectPanel overflow~~fix: SelectPanel overflowFeb 4, 2025

Merge branch 'main' into francinelucca/select-panel-overflow
382e4d1

francinelucca changed the title ~~fix: SelectPanel overflow~~fix(SelectPanel): Correctly recalculate position on overflowFeb 4, 2025

Create silent-cameras-care.md
d792c50

francinelucca added status: review needed and removed do not merge labels Feb 4, 2025

camertron suggested changes Feb 6, 2025
View reviewed changes

emilybrick approved these changes Feb 6, 2025
View reviewed changes

Merge branch 'main' of github.com:primer/react into francinelucca/sel…
7701ebd
…ect-panel-overflow

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Feb 10, 2025

TylerJDev reviewed Feb 11, 2025
View reviewed changes

Merge branch 'main' of github.com:primer/react into francinelucca/sel…
6cb8394
…ect-panel-overflow

fix(SelectPanel): fix flashing race condition and cleanup code
5c5f4fc

docs(AnchoredOverlay): document new pinPosition pro
971d1a9

fix tests
02b81d4

fix tests
35d58aa

fix tests
d16252b

test(vrt): update snapshots
8c1e8cf

francinelucca added 2 commits February 13, 2025 19:43

Revert "test(vrt): update snapshots"
7615786
This reverts commit 8c1e8cf.

remove test code
dc18438

Merge branch 'main' into francinelucca/select-panel-overflow
c874e45

camertron approved these changes Feb 14, 2025
View reviewed changes

primerBot mentioned this pull request Feb 14, 2025
Release tracking (37.14.0) #5694
Merged

		const anchorTop = anchorElementRef.current?.getBoundingClientRect().top ?? 0
		if (anchorTop > (floatingElementRef.current?.clientHeight ?? 0)) {

Uh oh!

Conversation

francinelucca commented Jan 17, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-botBot commented Jan 17, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Jan 17, 2025

Uh oh!

github-actionsBot commented Jan 17, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francineluccaFeb 4, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

camertron left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

emilybrick left a comment

Choose a reason for hiding this comment

Uh oh!

github-actionsBot commented Feb 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actionsBot commented Feb 13, 2025

Uh oh!

github-actionsBot commented Feb 13, 2025

Uh oh!

github-actionsBot commented Feb 13, 2025

Uh oh!

github-actionsBot commented Feb 13, 2025

Uh oh!

github-actionsBot commented Feb 13, 2025

Uh oh!

github-actionsBot commented Feb 13, 2025

Uh oh!

github-actionsBot commented Feb 13, 2025

Uh oh!

primer-integrationBot commented Feb 14, 2025

Uh oh!

primer-integrationBot commented Feb 14, 2025

Uh oh!

github-actionsBot commented Feb 14, 2025

Uh oh!

francinelucca commented Feb 14, 2025

Uh oh!

Reviewers

Assignees

francinelucca commented Jan 17, 2025•
edited
Loading

changeset-botBot commented Jan 17, 2025•
edited
Loading

github-actionsBot commented Jan 17, 2025•
edited
Loading

francineluccaFeb 4, 2025•
edited
Loading