Merge branch 'main' into fix_dialog_inside_menu

primer · Dec 15, 2023 · d40b812 · d40b812
2 parents 1945e77 + 58e700a
commit d40b812
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 1 deletion.
diff --git a/.changeset/tall-emus-jump.md 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
@@ -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
@@ -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
@@ -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>