Reproduce github/primer#4027

[siddharthkp]

• https://github.com/github/primer/issues/4027

Part 1: SelectPanel:

• 🟢 story: SelectPanel repositions after content grows
• 🔴 story: SelectPanel inside Dialog does not reposition after content grows

Video description:

1. When a SelectPanel is opened, it tries to always open on below the anchor button, which is what we see while it's loading items. However, once a list of items has finished loading, there isn't enough space inside the window for the SelectPanel, so it changes it's position to be above the anchor button.
2. However, when SelectPanel inside a Dialog, it does not reposition itself based on space inside the window and overflows outside the window.

reposition.mov

Not all that glitters...

Caveat: While the first part of the previous video looks like it's working perfectly, the panel only adjusts it's position once. So, if the length of the list changes again, for example while filtering, now the panel hangs awkwardly away from the anchor button.

far-away.mov

---

Part 2: AnchoredOverlay / useAnchoredPosition

This repositioning behavior comes from the underlying useAnchoredPosition hook and can be reproduced there as well:

• 🟢 story: AnchoredOverlay repositions after content grows
• 🔴 story: AnchoredOverlay inside Dialog does not reposition after content grows

The current behavior is implemented in AnchoredOverlay, but we may not want to change it for all AnchoredOverlays!

---

Part 3: When does an anchored overlay re-position itself?

This is the block of code that is of interest. to us:

https://github.com/primer/react/blob/main/packages/react/src/hooks/useAnchoredPosition.ts#L34-L48

const updatePosition = React.useCallback(
    () => { ... },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [floatingElementRef, anchorElementRef, ...dependencies],
  )

  useLayoutEffect(updatePosition, [updatePosition])
  useResizeObserver(updatePosition) // watching document for size changes

So the position is re-calculate when

1. the definition of updatePosition changes, that is when one of floatingElementRef, anchorElementRef or depdencies changes.
   a. As the first 2 dependencies are refs, they only change once when they are filled and not after that.
   b. The dependencies list from AnchoredOverlay has overlayRef.current which changes twice, once when the ref is filled and again when the overlay is closed
2. the document changes in size (page height or window size changes)

When the SelectPanel is opened near the bottom of the screen (like in left half of the video), it causes the height of the page to grow, triggering the resize observer.

In the right half of the video, SelectPanel is inside a dialog and there is no increase in page height and hence resize observer is not triggered. (The same would happen without a dialog as well if the page has overflow hidden, which is the case in memex)

---

Part 4: Potential fix

One potential fix is to add another resize observer that watches for changes in size of the floating element:

useResizeObserver(updatePosition) // default target element is document
+ useResizeObserver(updatePosition, floatingElementRef)

This does solve the solve the initial issue of the panel going out of screen, but trades it for a worse issue of constantly switching position when the size of the item changes 🤔

constant-switching.mov

A more complete fix is a more involved.

Notes from conversation with Maxime:

• Right now, the panel resizes based on the number of items. that works when it opens downwards
• opening upwards (or in a modal) on the other hand needs to be locked in size
• modal is a variant, so that's easy peasy. but opening upwards isn't always a setting, sometimes it's simply because there is no space in the window downwards :thinking_face: so it needs to be made much smarter

WIP PR: #5208

---

Related: Until now, there was no way to change anchorSide for select panel, there is however 4 instances that attempt it: 1 in dotcom and 3 in internal-statuspage

[changeset-bot]

⚠️ No Changeset found

Latest commit: 784964e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	98.49 KB (0%)
packages/react/dist/browser.umd.js	98.87 KB (0%)

[github-actions]

👋 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!