From 58406af64fcf7f938b3f03975c559fa7bc5a30b6 Mon Sep 17 00:00:00 2001
From: Aaron Dodson <adodson@google.com>
Date: Wed, 12 Feb 2025 11:53:16 -0800
Subject: [PATCH] fix: Fix menu scrolling. (#8765)

* Revert "fix: Fix bug that preventing scrolling menu items into view. (#8726)"

This reverts commit f166b677c0d323d1793060b8b7ddca5d2076ca69.

* fix: Fix menu scrolling.
---
 core/field_dropdown.ts |  6 ++++++
 core/menu.ts           | 15 +++++++--------
 core/utils/style.ts    | 14 --------------
 3 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/core/field_dropdown.ts b/core/field_dropdown.ts
index 6e8b5f8c8..bc2d2856f 100644
--- a/core/field_dropdown.ts
+++ b/core/field_dropdown.ts
@@ -29,6 +29,7 @@ import {Coordinate} from './utils/coordinate.js';
 import * as dom from './utils/dom.js';
 import * as parsing from './utils/parsing.js';
 import * as utilsString from './utils/string.js';
+import * as style from './utils/style.js';
 import {Svg} from './utils/svg.js';
 
 /**
@@ -303,6 +304,11 @@ export class FieldDropdown extends Field<string> {
 
     if (this.selectedMenuItem) {
       this.menu_!.setHighlighted(this.selectedMenuItem);
+      style.scrollIntoContainerView(
+        this.selectedMenuItem.getElement()!,
+        dropDownDiv.getContentDiv(),
+        true,
+      );
     }
 
     this.applyColour();
diff --git a/core/menu.ts b/core/menu.ts
index 7747a2973..ee54c8cf2 100644
--- a/core/menu.ts
+++ b/core/menu.ts
@@ -260,14 +260,13 @@ export class Menu {
       this.highlightedItem = item;
       // Bring the highlighted item into view. This has no effect if the menu is
       // not scrollable.
-      const el = this.getElement();
-      if (el) {
-        aria.setState(el, aria.State.ACTIVEDESCENDANT, item.getId());
-      }
-      item.getElement()?.scrollIntoView({
-        block: 'nearest',
-        inline: 'start',
-      });
+      const menuElement = this.getElement();
+      const scrollingParent = menuElement?.parentElement;
+      const menuItemElement = item.getElement();
+      if (!scrollingParent || !menuItemElement) return;
+
+      style.scrollIntoContainerView(menuItemElement, scrollingParent);
+      aria.setState(menuElement, aria.State.ACTIVEDESCENDANT, item.getId());
     }
   }
 
diff --git a/core/utils/style.ts b/core/utils/style.ts
index 5de69001f..4f8324be5 100644
--- a/core/utils/style.ts
+++ b/core/utils/style.ts
@@ -7,7 +7,6 @@
 // Former goog.module ID: Blockly.utils.style
 
 import {Coordinate} from './coordinate.js';
-import * as deprecation from './deprecation.js';
 import {Rect} from './rect.js';
 import {Size} from './size.js';
 
@@ -59,7 +58,6 @@ function getSizeInternal(element: Element): Size {
  * @returns Object with width/height properties.
  */
 function getSizeWithDisplay(element: Element): Size {
-  deprecation.warn(`Blockly.utils.style.getSizeWithDisplay()`, 'v11.2', 'v13');
   const offsetWidth = (element as HTMLElement).offsetWidth;
   const offsetHeight = (element as HTMLElement).offsetHeight;
   return new Size(offsetWidth, offsetHeight);
@@ -132,7 +130,6 @@ export function getViewportPageOffset(): Coordinate {
  * @returns The computed border widths.
  */
 export function getBorderBox(element: Element): Rect {
-  deprecation.warn(`Blockly.utils.style.getBorderBox()`, 'v11.2', 'v13');
   const left = parseFloat(getComputedStyle(element, 'borderLeftWidth'));
   const right = parseFloat(getComputedStyle(element, 'borderRightWidth'));
   const top = parseFloat(getComputedStyle(element, 'borderTopWidth'));
@@ -159,12 +156,6 @@ export function scrollIntoContainerView(
   container: Element,
   opt_center?: boolean,
 ) {
-  deprecation.warn(
-    `Blockly.utils.style.scrollIntoContainerView()`,
-    'v11.2',
-    'v13',
-    'the native Element.scrollIntoView()',
-  );
   const offset = getContainerOffsetToScrollInto(element, container, opt_center);
   container.scrollLeft = offset.x;
   container.scrollTop = offset.y;
@@ -189,11 +180,6 @@ export function getContainerOffsetToScrollInto(
   container: Element,
   opt_center?: boolean,
 ): Coordinate {
-  deprecation.warn(
-    `Blockly.utils.style.getContainerOffsetToScrollInto()`,
-    'v11.2',
-    'v13',
-  );
   // Absolute position of the element's border's top left corner.
   const elementPos = getPageOffset(element);
   // Absolute position of the container's border's top left corner.