[DREAM-729] Lazy loaded Action menu positioning is incorrect when opened at the bottom of the page.

https://community.openproject.org/wp/DREAM-729

Author: dombesz

.changeset/silly-lights-fall.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Fix lazy loaded action-menu positioning when opened at the bottom of the page.

app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -472,6 +472,7 @@ export class ActionMenuElement extends HTMLElement {
   #handleIncludeFragmentReplaced() {
     this.#firstItem?.focus()
     this.#softDisableItems()
+    this.overlay?.update()
 
     // async items have loaded, so component is ready
     this.setAttribute('data-ready', 'true')

previews/primer/alpha/action_menu_preview.rb

@@ -310,6 +310,13 @@ def with_deferred_content(nest_in_sub_menu: false)
         render_with_template(locals: { nest_in_sub_menu: nest_in_sub_menu })
       end
 
+      # @label With deferred content near the bottom of the viewport
+      #
+      # @hidden
+      def with_deferred_content_near_bottom_of_viewport
+        render_with_template
+      end
+
       # @label With deferred preloaded content
       #
       def with_deferred_preloaded_content

previews/primer/alpha/action_menu_preview/with_deferred_content_near_bottom_of_viewport.html.erb

@@ -0,0 +1,7 @@
+<%# The invoker is pinned to the bottom of the viewport so the overlay has no room to grow %>
+<%# downward once its deferred content loads, reproducing the scenario from DREAM-729. %>
+<div style="position: fixed; bottom: 100px; right: 0;">
+  <%= render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-bottom", src: primer_view_components.action_menu_deferred_path)) do |menu| %>
+    <% menu.with_show_button { "Menu with deferred content" } %>
+  <% end %>
+</div>

test/system/alpha/action_menu_test.rb

@@ -890,6 +890,24 @@ def test_deferred_loading_on_keydown
       assert_equal page.evaluate_script("document.activeElement").text, "Copy link"
     end
 
+    def test_deferred_loading_overlay_positioned_within_viewport
+      visit_preview(:with_deferred_content_near_bottom_of_viewport)
+      click_on_invoker_button
+
+      # Wait for lazy content to load
+      assert_selector "action-menu ul li", text: "Copy link"
+
+      overlay_in_viewport = page.evaluate_script(<<~JS)
+        (function() {
+          var el = document.querySelector('anchored-position')
+          var rect = el.getBoundingClientRect()
+          return rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+        })()
+      JS
+
+      assert overlay_in_viewport, "Overlay should be positioned within the viewport after deferred content loads"
+    end
+
     def test_deferred_dialog_opens
       visit_preview(:with_deferred_content)