Adding wrapper class around navigation to implement scroll styles/logic (https://github.com/woocommerce/woocommerce-admin/pull/5570)

plugins/woocommerce-admin/client/navigation/components/container/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import {
 	__experimentalNavigation as Navigation,
@@ -85,19 +85,18 @@ const Container = ( { menuItems } ) => {
 		[ menuItems ]
 	);
 
+	const navDomRef = useRef( null );
+
 	return (
 		<div className="woocommerce-navigation">
 			<Header />
+			<div className="woocommerce-navigation__wrapper" ref={ navDomRef }>
 				<Navigation
 					activeItem={ activeItem ? activeItem.id : null }
 					activeMenu={ activeLevel }
 					onActivateMenu={ ( ...args ) => {
-					const navDomRef = document.querySelector(
+						if ( navDomRef && navDomRef.current ) {
-						'.components-navigation'
+							navDomRef.current.scrollTop = 0;
-					);
-
-					if ( navDomRef ) {
-						navDomRef.scrollTop = 0;
 						}
 
 						setActiveLevel( ...args );
@@ -125,12 +124,17 @@ const Container = ( { menuItems } ) => {
 								title={ category.title }
 								menu={ category.id }
 								parentMenu={ category.parent }
-							backButtonLabel={ category.backButtonLabel || null }
+								backButtonLabel={
+									category.backButtonLabel || null
+								}
 							>
 								{ !! primaryItems.length && (
 									<NavigationGroup>
 										{ primaryItems.map( ( item ) => (
-										<Item key={ item.id } item={ item } />
+											<Item
+												key={ item.id }
+												item={ item }
+											/>
 										) ) }
 									</NavigationGroup>
 								) }
@@ -146,14 +150,20 @@ const Container = ( { menuItems } ) => {
 										}
 									>
 										{ pluginItems.map( ( item ) => (
-										<Item key={ item.id } item={ item } />
+											<Item
+												key={ item.id }
+												item={ item }
+											/>
 										) ) }
 									</NavigationGroup>
 								) }
 								{ !! secondaryItems.length && (
 									<NavigationGroup>
 										{ secondaryItems.map( ( item ) => (
-										<Item key={ item.id } item={ item } />
+											<Item
+												key={ item.id }
+												item={ item }
+											/>
 										) ) }
 									</NavigationGroup>
 								) }
@@ -162,6 +172,7 @@ const Container = ( { menuItems } ) => {
 					} ) }
 				</Navigation>
 			</div>
+		</div>
 	);
 };
 

plugins/woocommerce-admin/client/navigation/style.scss

@@ -22,9 +22,12 @@
 		z-index: 1100; //Must be greater than z-index on .woocommerce-layout__header
 	}
 
-	.components-navigation {
+	.woocommerce-navigation__wrapper {
 		overflow-y: auto;
 		height: calc(100vh - #{$header-height});
+	}
+
+	.components-navigation {
 		box-sizing: border-box;
 	}