From b992649af2753e818639fef6e38d34de63474822 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 4 Nov 2024 15:56:26 +0400 Subject: [PATCH] Components: Fix React Compiler error for 'useScrollRectIntoView' (#66498) * Components: Fix React Compiler error for 'useScrollRectIntoView' * Use optional chaining and add inline comment * Use single scroll call Co-authored-by: Mamaduka Co-authored-by: tyxla Co-authored-by: ciampo --- packages/components/src/tabs/tablist.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx index 2f736d6b95441..b7cfef7e19a09 100644 --- a/packages/components/src/tabs/tablist.tsx +++ b/packages/components/src/tabs/tablist.tsx @@ -48,10 +48,21 @@ function useScrollRectIntoView( const childRightEdge = childLeft + childWidth; const rightOverflow = childRightEdge + margin - parentRightEdge; const leftOverflow = parentScroll - ( childLeft - margin ); + + let scrollLeft = null; if ( leftOverflow > 0 ) { - parent.scrollLeft = parentScroll - leftOverflow; + scrollLeft = parentScroll - leftOverflow; } else if ( rightOverflow > 0 ) { - parent.scrollLeft = parentScroll + rightOverflow; + scrollLeft = parentScroll + rightOverflow; + } + + if ( scrollLeft !== null ) { + /** + * The optional chaining is used here to avoid unit test failures. + * It can be removed when JSDOM supports `Element` scroll methods. + * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096 + */ + parent.scroll?.( { left: scrollLeft } ); } }, [ margin, parent, rect ] ); }