Fix Chrome scrolling by using alternate scrollIntoViewIfNeeded (#1823)

* Break out scrollIntoViewIfNeeded into freely usable function

* Always use alternate implementation of scrollIntoViewIfNeeded

Refs #1714

Refs #1742

src/components/SideMenu/MenuItem.tsx

@@ -7,6 +7,7 @@ import { shortenHTTPVerb } from '../../utils/openapi';
 import { MenuItems } from './MenuItems';
 import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
 import { l } from '../../services/Labels';
+import { scrollIntoViewIfNeeded } from '../../utils';
 
 export interface MenuItemProps {
   item: IMenuItem;
@@ -33,7 +34,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
 
   scrollIntoViewIfActive() {
     if (this.props.item.active && this.ref.current) {
-      this.ref.current.scrollIntoViewIfNeeded();
+      scrollIntoViewIfNeeded(this.ref.current);
     }
   }
 
@@ -77,7 +78,7 @@ export class OperationMenuItemContent extends React.Component<OperationMenuItemC
 
   componentDidUpdate() {
     if (this.props.item.active && this.ref.current) {
-      this.ref.current.scrollIntoViewIfNeeded();
+      scrollIntoViewIfNeeded(this.ref.current);
     }
   }
 

src/components/SideMenu/SideMenu.tsx

@@ -37,7 +37,6 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
     if (item && item.active && this.context.menuToggle) {
       return item.expanded ? item.collapse() : item.expand();
     }
-
     this.props.menu.activateAndScroll(item, true);
     setTimeout(() => {
       if (this._updateScroll) {

src/utils/dom.ts

@@ -24,13 +24,16 @@ export function html2Str(html: string): string {
     .join(' ');
 }
 
-// scrollIntoViewIfNeeded polyfill
+// Alternate scrollIntoViewIfNeeded implementation.
+// Used in all cases, since it seems Chrome's implementation is buggy
+// when "Experimental Web Platform Features" is enabled (at least of version 96).
+// See #1714, #1742
 
-if (typeof Element !== 'undefined' && !(Element as any).prototype.scrollIntoViewIfNeeded) {
-  (Element as any).prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
-    centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
-
-    const parent = this.parentNode;
+export function scrollIntoViewIfNeeded(el: HTMLElement, centerIfNeeded = true) {
+  const parent = el.parentNode as HTMLElement | null;
+  if (!parent) {
+    return;
+  }
   const parentComputedStyle = window.getComputedStyle(parent, undefined);
   const parentBorderTopWidth = parseInt(
     parentComputedStyle.getPropertyValue('border-top-width'),
@@ -40,36 +43,35 @@ if (typeof Element !== 'undefined' && !(Element as any).prototype.scrollIntoView
     parentComputedStyle.getPropertyValue('border-left-width'),
     10,
   );
-    const overTop = this.offsetTop - parent.offsetTop < parent.scrollTop;
+  const overTop = el.offsetTop - parent.offsetTop < parent.scrollTop;
   const overBottom =
-      this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth >
+    el.offsetTop - parent.offsetTop + el.clientHeight - parentBorderTopWidth >
     parent.scrollTop + parent.clientHeight;
-    const overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft;
+  const overLeft = el.offsetLeft - parent.offsetLeft < parent.scrollLeft;
   const overRight =
-      this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth >
+    el.offsetLeft - parent.offsetLeft + el.clientWidth - parentBorderLeftWidth >
     parent.scrollLeft + parent.clientWidth;
   const alignWithTop = overTop && !overBottom;
 
   if ((overTop || overBottom) && centerIfNeeded) {
     parent.scrollTop =
-        this.offsetTop -
+      el.offsetTop -
       parent.offsetTop -
       parent.clientHeight / 2 -
       parentBorderTopWidth +
-        this.clientHeight / 2;
+      el.clientHeight / 2;
   }
 
   if ((overLeft || overRight) && centerIfNeeded) {
     parent.scrollLeft =
-        this.offsetLeft -
+      el.offsetLeft -
       parent.offsetLeft -
       parent.clientWidth / 2 -
       parentBorderLeftWidth +
-        this.clientWidth / 2;
+      el.clientWidth / 2;
   }
 
   if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
-      this.scrollIntoView(alignWithTop);
+    el.scrollIntoView(alignWithTop);
   }
-  };
 }