Bug Fix: anchored-position re-calculate position on scroll (#2794)

.changeset/brown-buckets-sell.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix: Re-calculate anchored-position on scroll

app/components/primer/anchored_position.ts

@@ -13,6 +13,8 @@ const updateWhenVisible = (() => {
   return (el: AnchoredPositionElement) => {
     // eslint-disable-next-line github/prefer-observers
     window.addEventListener('resize', updateVisibleAnchors)
+    // eslint-disable-next-line github/prefer-observers
+    window.addEventListener('scroll', updateVisibleAnchors)
     intersectionObserver ||= new IntersectionObserver(entries => {
       for (const entry of entries) {
         const target = entry.target as AnchoredPositionElement

previews/primer/alpha/overlay_preview.rb

@@ -187,6 +187,10 @@ def overlay_with_header_filter
       def overlay_with_three_bodies
         render_with_template(locals: {})
       end
+
+      def in_a_sticky_container
+        render_with_template(locals: {})
+      end
     end
   end
 end

previews/primer/alpha/overlay_preview/in_a_sticky_container.html.erb

@@ -0,0 +1,19 @@
+<div style="position:sticky;top:0;" class="color-bg-accent">
+  <%= render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d| %>
+    <% d.with_header(title: "Large Dialog Header", divider: true) do |header| %>
+      <% header.with_filter do %>
+        <%= render Primer::Alpha::TextField.new(
+          autofocus: true,
+          visually_hide_label:
+          true,
+          name: "filter",
+          label: "Filter Overlay"
+        ) %>
+      <% end %>
+    <% end %>
+    <% d.with_show_button { "Show Overlay" } %>
+    <% d.with_footer { "Large Dialog Footer" } %>
+    <% d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 } %>
+  <% end %>
+</div>
+<div style="height:3000px;"></div>