Fix SelectPanel dialog floating away from trigger on content size change

[Copilot]

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

Primer::Alpha::SelectPanel dialogs detach from their trigger (appear "jumpy", float toward the middle of the page) when the dialog's rendered size changes after it has been positioned — most visibly with anchor_side: :outside_top near the bottom of a scrollable page.

Root cause: updateAnchorPosition was only re-run on window resize/scroll and documentElement resize. For sides whose position depends on the dialog's height (outside-top: top = anchor.top - height - offset), a later size change (e.g. remote content finishing loading) left the dialog pinned at its stale top.

Changes (app/components/primer/alpha/select_panel_element.ts):

• Add the open dialog to the existing ResizeObserver on dialog:open; remove it on dialog:close.
• Any change to the dialog's box size now triggers a re-anchor, keeping it pinned to the trigger.

el.addEventListener('dialog:open', () => {
  anchors.add(el)
  // Re-anchor when the dialog's own size changes (e.g. after remote content loads).
  if (el.dialog) resizeObserver?.observe(el.dialog)
})

Screenshots

N/A — behavioral positioning fix; no static visual change.

Integration

No production code updates required. Behavior change is contained to the SelectPanel custom element.

List the issues that this change affects.

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

Reuses an existing observer; scoped to the open dialog and cleaned up on close.

What approach did you choose and why?

Observing the dialog's size is the smallest change that addresses the actual trigger — content/size changes after positioning — rather than patching individual load/filter callbacks, which would miss other size-change paths. Observation is bounded to while the dialog is open and unregistered on close to avoid leaking observers.

Anything you want to highlight for special attention from reviewers?

• The new system test exercises the failure path by changing the dialog's rendered height after open; it was verified to fail without the fix (dialog ~284px off) and pass with it.
• assert_anchored_above_invoker uses a short retry loop because the re-anchor fires asynchronously via ResizeObserver and can't be awaited with Capybara's selector-based wait:. This mirrors the existing assert_announces helper in the same file.

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8832222

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	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