From 23ff9e4f72f266693f89961d0cf5c3613d428298 Mon Sep 17 00:00:00 2001
From: austinw-fineart <40481873+austinw-fineart@users.noreply.github.com>
Date: Wed, 26 Jun 2024 15:50:33 +0800
Subject: [PATCH 1/2] refactor(menu): allow passing focus options

---
 menu/internal/menuitem/menu-item.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/menu/internal/menuitem/menu-item.ts b/menu/internal/menuitem/menu-item.ts
index 4092313202..d28e42c6d9 100644
--- a/menu/internal/menuitem/menu-item.ts
+++ b/menu/internal/menuitem/menu-item.ts
@@ -208,9 +208,9 @@ export class MenuItemEl extends LitElement implements MenuItem {
     `;
   }
 
-  override focus() {
+  override focus(options?: FocusOptions) {
     // TODO(b/300334509): needed for some cases where delegatesFocus doesn't
     // work programmatically like in FF and select-option
-    this.listItemRoot?.focus();
+    this.listItemRoot?.focus(options);
   }
 }

From eeba311af7765d2624b1454a36cabb58e563bd81 Mon Sep 17 00:00:00 2001
From: austinw-fineart <40481873+austinw-fineart@users.noreply.github.com>
Date: Wed, 26 Jun 2024 16:27:13 +0800
Subject: [PATCH 2/2] refactor(menu): focus before animation

---
 menu/internal/menu.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/menu/internal/menu.ts b/menu/internal/menu.ts
index 80b807d4c2..2118a9f025 100644
--- a/menu/internal/menu.ts
+++ b/menu/internal/menu.ts
@@ -596,21 +596,15 @@ export abstract class Menu extends LitElement {
 
     let animationAborted = !this.quick;
 
-    if (this.quick) {
-      this.dispatchEvent(new Event('opening'));
-    } else {
-      animationAborted = !!(await this.animateOpen());
-    }
-
-    // This must come after the opening animation or else it may focus one of
-    // the items before the animation has begun and causes the list to slide
-    // (block-padding-of-the-menu)px at the end of the animation
+    // Focusing one of the items before the animation has begun causes the list
+    // to slide (block-padding-of-the-menu)px at the end of the animation.
+    // Setting preventScroll avoids this.
     switch (this.defaultFocus) {
       case FocusState.FIRST_ITEM:
         const first = getFirstActivatableItem(items);
         if (first) {
           first.tabIndex = 0;
-          first.focus();
+          first.focus({ preventScroll: true });
           await (first as LitElement & MenuItem).updateComplete;
         }
         break;
@@ -618,12 +612,12 @@ export abstract class Menu extends LitElement {
         const last = getLastActivatableItem(items);
         if (last) {
           last.tabIndex = 0;
-          last.focus();
+          last.focus({ preventScroll: true });
           await (last as LitElement & MenuItem).updateComplete;
         }
         break;
       case FocusState.LIST_ROOT:
-        this.focus();
+        this.focus({ preventScroll: true });
         break;
       default:
       case FocusState.NONE:
@@ -631,6 +625,12 @@ export abstract class Menu extends LitElement {
         break;
     }
 
+    if (this.quick) {
+      this.dispatchEvent(new Event('opening'));
+    } else {
+      animationAborted = !!(await this.animateOpen());
+    }
+
     if (!animationAborted) {
       this.dispatchEvent(new Event('opened'));
     }