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)). diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx index e7a7f3fc266a7e..81302d5bfebe81 100644 --- a/packages/components/src/form-token-field/suggestions-list.tsx +++ b/packages/components/src/form-token-field/suggestions-list.tsx @@ -38,7 +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 id: number; + let rafId: number | undefined; if ( selectedIndex > -1 && scrollIntoView && @@ -52,14 +52,14 @@ export function SuggestionsList< T extends string | { value: string } >( { onlyScrollIfNeeded: true, } ); - id = window.setTimeout( () => { + rafId = requestAnimationFrame( () => { setScrollingIntoView( false ); - }, 100 ); + } ); } return () => { - if ( id !== undefined ) { - window.clearTimeout( id ); + if ( rafId !== undefined ) { + cancelAnimationFrame( rafId ); } }; },