From 2b7f3f94dd7151f3668b8cb96c74f8e42be9619a Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 15 Feb 2024 16:57:18 +0200 Subject: [PATCH 1/6] Block Editor: Use element.scrollIntoView() for URLInput --- .../block-editor/src/components/url-input/index.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 947c39abfd0c7d..1c7599c4a7704e 100644 --- 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 @@ -87,13 +86,11 @@ class URLInput extends Component { ! this.scrollingIntoView ) { this.scrollingIntoView = true; - scrollIntoView( - this.suggestionNodes[ selectedSuggestion ], - this.autocompleteRef.current, - { - onlyScrollIfNeeded: true, - } - ); + this.suggestionNodes[ selectedSuggestion ].scrollIntoView( { + behavior: 'instant', + block: 'nearest', + inline: 'nearest', + } ); this.props.setTimeout( () => { this.scrollingIntoView = false; From 6b7d4e3f84c571c40c75491ec8fd87be89fafa78 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 15 Feb 2024 16:58:00 +0200 Subject: [PATCH 2/6] Components: Use element.scrollIntoView for FormTokenField suggestions --- .../src/form-token-field/suggestions-list.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx index 81302d5bfebe81..6b966f0f00a41d 100644 --- a/packages/components/src/form-token-field/suggestions-list.tsx +++ b/packages/components/src/form-token-field/suggestions-list.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import scrollView from 'dom-scroll-into-view'; import classnames from 'classnames'; import type { MouseEventHandler, ReactNode } from 'react'; @@ -45,13 +44,11 @@ export function SuggestionsList< T extends string | { value: string } >( { listNode.children[ selectedIndex ] ) { setScrollingIntoView( true ); - scrollView( - listNode.children[ selectedIndex ] as HTMLLIElement, - listNode, - { - onlyScrollIfNeeded: true, - } - ); + listNode.children[ selectedIndex ].scrollIntoView( { + behavior: 'instant', + block: 'nearest', + inline: 'nearest', + } ); rafId = requestAnimationFrame( () => { setScrollingIntoView( false ); } ); From bd6b8948cb1dd202d43150d49a54078170a38087 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 15 Feb 2024 17:02:36 +0200 Subject: [PATCH 3/6] Remove unnecessary scrolling state --- .../block-editor/src/components/url-input/index.js | 8 +------- .../src/form-token-field/suggestions-list.tsx | 11 +---------- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 1c7599c4a7704e..56426d2eaf4796 100644 --- a/packages/block-editor/src/components/url-input/index.js +++ b/packages/block-editor/src/components/url-input/index.js @@ -82,19 +82,13 @@ class URLInput extends Component { if ( showSuggestions && selectedSuggestion !== null && - this.suggestionNodes[ selectedSuggestion ] && - ! this.scrollingIntoView + this.suggestionNodes[ selectedSuggestion ] ) { - this.scrollingIntoView = true; this.suggestionNodes[ selectedSuggestion ].scrollIntoView( { behavior: 'instant', block: 'nearest', inline: 'nearest', } ); - - this.props.setTimeout( () => { - this.scrollingIntoView = false; - }, 100 ); } // Update suggestions when the value changes. diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx index 6b966f0f00a41d..ff2036a3472e0a 100644 --- a/packages/components/src/form-token-field/suggestions-list.tsx +++ b/packages/components/src/form-token-field/suggestions-list.tsx @@ -7,7 +7,6 @@ import type { MouseEventHandler, ReactNode } from 'react'; /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; import { useRefEffect } from '@wordpress/compose'; /** @@ -31,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 @@ -43,15 +40,11 @@ export function SuggestionsList< T extends string | { value: string } >( { scrollIntoView && listNode.children[ selectedIndex ] ) { - setScrollingIntoView( true ); listNode.children[ selectedIndex ].scrollIntoView( { behavior: 'instant', block: 'nearest', inline: 'nearest', } ); - rafId = requestAnimationFrame( () => { - setScrollingIntoView( false ); - } ); } return () => { @@ -65,9 +58,7 @@ export function SuggestionsList< T extends string | { value: string } >( { const handleHover = ( suggestion: T ) => { return () => { - if ( ! scrollingIntoView ) { - onHover?.( suggestion ); - } + onHover?.( suggestion ); }; }; From b4e22ea1b88be6ad5a009e857ce40cf834dfb292 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 15 Feb 2024 17:07:45 +0200 Subject: [PATCH 4/6] Remove unused dom-scroll-into-view dependency --- package-lock.json | 14 ------------- packages/block-editor/package.json | 1 - packages/components/package.json | 1 - packages/components/tsconfig.json | 1 - patches/dom-scroll-into-view+1.2.1.patch | 25 ------------------------ typings/dom-scroll-into-view/index.d.ts | 18 ----------------- 6 files changed, 60 deletions(-) delete mode 100644 patches/dom-scroll-into-view+1.2.1.patch delete mode 100644 typings/dom-scroll-into-view/index.d.ts diff --git a/package-lock.json b/package-lock.json index 6f17ffb7edef6a..a461be9fbb16a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25554,11 +25554,6 @@ "utila": "~0.4" } }, - "node_modules/dom-scroll-into-view": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz", - "integrity": "sha512-LwNVg3GJOprWDO+QhLL1Z9MMgWe/KAFLxVWKzjRTxNSPn8/LLDIfmuG71YHznXCqaqTjvHJDYO1MEAgX6XCNbQ==" - }, "node_modules/dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -54386,7 +54381,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", @@ -54654,7 +54648,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", @@ -69759,7 +69752,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", @@ -69954,7 +69946,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", @@ -76787,11 +76778,6 @@ "utila": "~0.4" } }, - "dom-scroll-into-view": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz", - "integrity": "sha512-LwNVg3GJOprWDO+QhLL1Z9MMgWe/KAFLxVWKzjRTxNSPn8/LLDIfmuG71YHznXCqaqTjvHJDYO1MEAgX6XCNbQ==" - }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 59eede6f9d4db0..fcc36c14a09d06 100644 --- 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/components/package.json b/packages/components/package.json index 32c3620ec45190..4f7d68bc9a0593 100644 --- 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/tsconfig.json b/packages/components/tsconfig.json index 1ee9a35f1a8b22..ceb08fdfbc7033 100644 --- 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 deleted file mode 100644 index abf9482fb11f06..00000000000000 --- a/patches/dom-scroll-into-view+1.2.1.patch +++ /dev/null @@ -1,25 +0,0 @@ -diff --git a/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js b/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js -index 557ed5c..23dfbad 100644 ---- a/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js -+++ b/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js -@@ -21,6 +21,7 @@ function scrollIntoView(elem, container, config) { - allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll; - - var isWin = util.isWindow(container); -+ var isFramed = !!(isWin && container.frameElement); - var elemOffset = util.offset(elem); - var eh = util.outerHeight(elem); - var ew = util.outerWidth(elem); -@@ -35,7 +36,11 @@ function scrollIntoView(elem, container, config) { - var ww = undefined; - var wh = undefined; - -- if (isWin) { -+ if (isFramed) { -+ container = container.document.scrollingElement || container.document.body; -+ } -+ -+ if (isWin || isFramed) { - win = container; - wh = util.height(win); - ww = util.width(win); diff --git a/typings/dom-scroll-into-view/index.d.ts b/typings/dom-scroll-into-view/index.d.ts deleted file mode 100644 index 0b299a71a27fba..00000000000000 --- a/typings/dom-scroll-into-view/index.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -interface Config { - alignWithLeft?: boolean; - alignWithTop?: boolean; - offsetTop?: number; - offsetLeft?: number; - offsetBottom?: number; - offsetRight?: number; - allowHorizontalScroll?: boolean; - onlyScrollIfNeeded?: boolean; -} - -declare module 'dom-scroll-into-view' { - export default function scrollIntoView( - source: HTMLElement, - container: HTMLElement, - config: Config - ): void; -} From 42e7f2f16bfaa81d7c31596afcd4cd904f72dcf8 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 15 Feb 2024 17:18:19 +0200 Subject: [PATCH 5/6] Jest: Add a global mock for Element.scrollIntoView() --- test/unit/config/global-mocks.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js index 84ec5acbe91923..fd5a934efe85b8 100644 --- 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(); From 6b4a5d5911ac739f38894278b94b67dc2f2217ef Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 15 Feb 2024 17:36:41 +0200 Subject: [PATCH 6/6] Add components package CHANGELOG entry --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ebce7cbd6fdad4..b5def99012dbe9 100644 --- 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)