From f8e5aaa1b317a516788343388c35f1bfe6be5a56 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 29 Sep 2022 11:53:20 +0200 Subject: [PATCH 1/3] SuggestionList: use requestAnimationFrame instead of setTimeout when scrolling selected item into view --- .../src/form-token-field/suggestions-list.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx index e7a7f3fc266a7e..51ff8bd67cb33c 100644 --- a/packages/components/src/form-token-field/suggestions-list.tsx +++ b/packages/components/src/form-token-field/suggestions-list.tsx @@ -38,7 +38,6 @@ export function SuggestionsList< T extends string | { value: string } >( { ( listNode ) => { // only have to worry about scrolling selected suggestion into view // when already expanded. - let id: number; if ( selectedIndex > -1 && scrollIntoView && @@ -52,16 +51,10 @@ export function SuggestionsList< T extends string | { value: string } >( { onlyScrollIfNeeded: true, } ); - id = window.setTimeout( () => { + requestAnimationFrame( () => { setScrollingIntoView( false ); - }, 100 ); + } ); } - - return () => { - if ( id !== undefined ) { - window.clearTimeout( id ); - } - }; }, [ selectedIndex, scrollIntoView ] ); From 04859964dc2139bca2ba340467f4801d8e375af0 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 29 Sep 2022 12:18:21 +0200 Subject: [PATCH 2/3] CHANGELOG --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 222504c902d51a..b860928faa4add 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -26,6 +26,10 @@ - `NavigatorScreen`: fix focus issue where back button received focus unexpectedly ([#44239](https://github.com/WordPress/gutenberg/pull/44239)) - `FontSizePicker`: Fix header order in RTL languages ([#44590](https://github.com/WordPress/gutenberg/pull/44590)). +### Enhancements + +- `SuggestionList`: use `requestAnimationFrame` instead of `setTimeout` when scrolling selected item into view. This change improves the responsiveness of the `ComboboxControl` and `FormTokenField` components when rapidly hovering over the suggestion items in the list ([#44573](https://github.com/WordPress/gutenberg/pull/44573)). + ### Internal - `Mobile` updated to ignore `react/exhaustive-deps` eslint rule ([#44207](https://github.com/WordPress/gutenberg/pull/44207)). From 8f71327ee270bc94454402096b9b3adba76334aa Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 30 Sep 2022 09:55:03 +0200 Subject: [PATCH 3/3] Cancel rAF as part of the useeffect s cleanup --- .../components/src/form-token-field/suggestions-list.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx index 51ff8bd67cb33c..81302d5bfebe81 100644 --- a/packages/components/src/form-token-field/suggestions-list.tsx +++ b/packages/components/src/form-token-field/suggestions-list.tsx @@ -38,6 +38,7 @@ export function SuggestionsList< T extends string | { value: string } >( { ( listNode ) => { // only have to worry about scrolling selected suggestion into view // when already expanded. + let rafId: number | undefined; if ( selectedIndex > -1 && scrollIntoView && @@ -51,10 +52,16 @@ export function SuggestionsList< T extends string | { value: string } >( { onlyScrollIfNeeded: true, } ); - requestAnimationFrame( () => { + rafId = requestAnimationFrame( () => { setScrollingIntoView( false ); } ); } + + return () => { + if ( rafId !== undefined ) { + cancelAnimationFrame( rafId ); + } + }; }, [ selectedIndex, scrollIntoView ] );