Components: Use Element.scrollIntoView() instead of `dom-scroll-int…

…o-view` (#59085) * Block Editor: Use element.scrollIntoView() for URLInput * Components: Use element.scrollIntoView for FormTokenField suggestions * Remove unnecessary scrolling state * Remove unused dom-scroll-into-view dependency * Jest: Add a global mock for Element.scrollIntoView() * Add components package CHANGELOG entry Co-authored-by: tyxla <[email protected]> Co-authored-by: youknowriad <[email protected]>
WordPress · Feb 16, 2024 · 77bdd55 · 77bdd55 · github-actions · Feb 16, 2024
1 parent 05272e6
commit 77bdd55
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 92 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -69,7 +69,6 @@
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
-		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",

diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import scrollIntoView from 'dom-scroll-into-view';
 
 /**
  * WordPress dependencies
@@ -83,21 +82,13 @@ class URLInput extends Component {
 		if (
 			showSuggestions &&
 			selectedSuggestion !== null &&
-			this.suggestionNodes[ selectedSuggestion ] &&
-			! this.scrollingIntoView
+			this.suggestionNodes[ selectedSuggestion ]
 		) {
-			this.scrollingIntoView = true;
-			scrollIntoView(
-				this.suggestionNodes[ selectedSuggestion ],
-				this.autocompleteRef.current,
-				{
-					onlyScrollIfNeeded: true,
-				}
-			);
-
-			this.props.setTimeout( () => {
-				this.scrollingIntoView = false;
-			}, 100 );
+			this.suggestionNodes[ selectedSuggestion ].scrollIntoView( {
+				behavior: 'instant',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
 		}
 
 		// Update suggestions when the value changes.

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,6 +10,8 @@
 
 -   `ColorPicker`: Style without accessing internal `InputControl` classes ([#59069](https://github.com/WordPress/gutenberg/pull/59069)).
 -   Add lint rules for theme color CSS var usage ([#59022](https://github.com/WordPress/gutenberg/pull/59022)).
+-   `FormTokenField`: Use `Element.scrollIntoView()` instead of `dom-scroll-into-view` ([#59085](https://github.com/WordPress/gutenberg/pull/59085)).
+-   Removing `dom-scroll-into-view` as a dependency of the components package ([#59085](https://github.com/WordPress/gutenberg/pull/59085)).
 
 ## 26.0.1 (2024-02-13)
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -64,7 +64,6 @@
 		"colord": "^2.7.0",
 		"date-fns": "^2.28.0",
 		"deepmerge": "^4.3.0",
-		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^10.13.0",

diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx
@@ -1,14 +1,12 @@
 /**
  * External dependencies
  */
-import scrollView from 'dom-scroll-into-view';
 import classnames from 'classnames';
 import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -32,8 +30,6 @@ export function SuggestionsList< T extends string | { value: string } >( {
 	instanceId,
 	__experimentalRenderItem,
 }: SuggestionsListProps< T > ) {
-	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
-
 	const listRef = useRefEffect< HTMLUListElement >(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
@@ -44,16 +40,10 @@ export function SuggestionsList< T extends string | { value: string } >( {
 				scrollIntoView &&
 				listNode.children[ selectedIndex ]
 			) {
-				setScrollingIntoView( true );
-				scrollView(
-					listNode.children[ selectedIndex ] as HTMLLIElement,
-					listNode,
-					{
-						onlyScrollIfNeeded: true,
-					}
-				);
-				rafId = requestAnimationFrame( () => {
-					setScrollingIntoView( false );
+				listNode.children[ selectedIndex ].scrollIntoView( {
+					behavior: 'instant',
+					block: 'nearest',
+					inline: 'nearest',
 				} );
 			}
 
@@ -68,9 +58,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 
 	const handleHover = ( suggestion: T ) => {
 		return () => {
-			if ( ! scrollingIntoView ) {
-				onHover?.( suggestion );
-			}
+			onHover?.( suggestion );
 		};
 	};
 

diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -6,7 +6,6 @@
 		"types": [
 			"gutenberg-env",
 			"gutenberg-test-env",
-			"dom-scroll-into-view",
 			"jest",
 			"@testing-library/jest-dom"
 		],

diff --git a/patches/dom-scroll-into-view+1.2.1.patch b/patches/dom-scroll-into-view+1.2.1.patch
diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
@@ -28,3 +28,11 @@ global.ResizeObserver = require( 'resize-observer-polyfill' );
 if ( ! window.DOMRect ) {
 	window.DOMRect = class DOMRect {};
 }
+
+/**
+ * Polyfill for Element.scrollIntoView().
+ * Necessary because it's not implemented in jsdom, and likely will never be.
+ *
+ * @see https://github.com/jsdom/jsdom/issues/1695
+ */
+global.Element.prototype.scrollIntoView = jest.fn();
diff --git a/typings/dom-scroll-into-view/index.d.ts b/typings/dom-scroll-into-view/index.d.ts