From 58e700ab9222054bc803541d9eccc4877254b1c1 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Fri, 15 Dec 2023 18:48:16 +0000
Subject: [PATCH] ensure scroll position does not change when opening
 actionmenu (#2411)

Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Co-authored-by: Jon Rohan <rohan@github.com>
---
 .changeset/tall-emus-jump.md                          |  5 +++++
 .../primer/alpha/action_menu/action_menu_element.ts   |  6 +++++-
 previews/primer/alpha/action_menu_preview.rb          |  7 +++++++
 .../action_menu_preview/in_scroll_container.html.erb  | 11 +++++++++++
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tall-emus-jump.md
 create mode 100644 previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb

diff --git a/.changeset/tall-emus-jump.md b/.changeset/tall-emus-jump.md
new file mode 100644
index 0000000000..a7a3bd2b8c
--- /dev/null
+++ b/.changeset/tall-emus-jump.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Ensure scroll position does not change when opening ActionMenus
diff --git a/app/components/primer/alpha/action_menu/action_menu_element.ts b/app/components/primer/alpha/action_menu/action_menu_element.ts
index e9a8673c39..2600f0ead7 100644
--- a/app/components/primer/alpha/action_menu/action_menu_element.ts
+++ b/app/components/primer/alpha/action_menu/action_menu_element.ts
@@ -107,6 +107,7 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('mouseover', this, {signal})
     this.addEventListener('focusout', this, {signal})
     this.addEventListener('mousedown', this, {signal})
+    this.popoverElement?.addEventListener('toggle', this, {signal})
     this.#setDynamicLabel()
     this.#updateInput()
     this.#softDisableItems()
@@ -182,6 +183,10 @@ export class ActionMenuElement extends HTMLElement {
     const targetIsInvoker = this.invokerElement?.contains(event.target as HTMLElement)
     const eventIsActivation = this.#isActivation(event)
 
+    if (event.type === 'toggle' && (event as ToggleEvent).newState === 'open') {
+      this.#firstItem?.focus()
+    }
+
     if (targetIsInvoker && event.type === 'mousedown') {
       this.#invokerBeingClicked = true
       return
@@ -261,7 +266,6 @@ export class ActionMenuElement extends HTMLElement {
       this.#hide()
     } else {
       this.#show()
-      this.#firstItem?.focus()
     }
   }
 
diff --git a/previews/primer/alpha/action_menu_preview.rb b/previews/primer/alpha/action_menu_preview.rb
index 84a0abbe89..ad9b0122c3 100644
--- a/previews/primer/alpha/action_menu_preview.rb
+++ b/previews/primer/alpha/action_menu_preview.rb
@@ -323,6 +323,13 @@ def opens_dialog(menu_id: "menu-1")
                              })
       end
 
+      # @label In Scoll container
+      #
+      def in_scroll_container
+        render_with_template()
+      end
+
+
       # @label Align end
       #
       def align_end(menu_id: "menu-1")
diff --git a/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb b/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb
new file mode 100644
index 0000000000..0f991715cd
--- /dev/null
+++ b/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb
@@ -0,0 +1,11 @@
+<div style="height: 400px"></div>
+
+<div style="position: relative">
+  <%= render Primer::Alpha::ActionMenu.new(anchor_align: :end) do |c| %>
+    <% c.with_show_button { "Edit" } %>
+    <% c.with_item(tag: :button, type: "button", label: "Rename") %>
+    <% c.with_item(tag: :button, type: "button", scheme: :danger, label: "Remove") %>
+  <% end %>
+</div>
+
+<div style="height: 1400px"></div>