From 481431dfa38a4aeeb3a2dcdbfab23cbf568959aa Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Sat, 26 Oct 2024 15:43:32 +0400 Subject: [PATCH 1/3] Components: Fix React Compiler error for 'useScrollRectIntoView' --- packages/components/src/tabs/tablist.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx index 2f736d6b95441..afa626dd2c60a 100644 --- a/packages/components/src/tabs/tablist.tsx +++ b/packages/components/src/tabs/tablist.tsx @@ -49,9 +49,9 @@ function useScrollRectIntoView( const rightOverflow = childRightEdge + margin - parentRightEdge; const leftOverflow = parentScroll - ( childLeft - margin ); if ( leftOverflow > 0 ) { - parent.scrollLeft = parentScroll - leftOverflow; + parent.scroll( { left: parentScroll - leftOverflow } ); } else if ( rightOverflow > 0 ) { - parent.scrollLeft = parentScroll + rightOverflow; + parent.scroll( { left: parentScroll + rightOverflow } ); } }, [ margin, parent, rect ] ); } From 925b5f590462428efbeeb543d40129829dfa1206 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 1 Nov 2024 08:06:29 +0400 Subject: [PATCH 2/3] Use optional chaining and add inline comment --- packages/components/src/tabs/tablist.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx index afa626dd2c60a..89afb8f3cadb8 100644 --- a/packages/components/src/tabs/tablist.tsx +++ b/packages/components/src/tabs/tablist.tsx @@ -49,9 +49,14 @@ function useScrollRectIntoView( const rightOverflow = childRightEdge + margin - parentRightEdge; const leftOverflow = parentScroll - ( childLeft - margin ); if ( leftOverflow > 0 ) { - parent.scroll( { left: parentScroll - leftOverflow } ); + /** + * 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: parentScroll - leftOverflow } ); } else if ( rightOverflow > 0 ) { - parent.scroll( { left: parentScroll + rightOverflow } ); + parent.scroll?.( { left: parentScroll + rightOverflow } ); } }, [ margin, parent, rect ] ); } From 1558a3f90e91b56286b63b4948c57b731d97ae6c Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 1 Nov 2024 14:13:23 +0400 Subject: [PATCH 3/3] Use single scroll call --- packages/components/src/tabs/tablist.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx index 89afb8f3cadb8..b7cfef7e19a09 100644 --- a/packages/components/src/tabs/tablist.tsx +++ b/packages/components/src/tabs/tablist.tsx @@ -48,15 +48,21 @@ function useScrollRectIntoView( const childRightEdge = childLeft + childWidth; const rightOverflow = childRightEdge + margin - parentRightEdge; const leftOverflow = parentScroll - ( childLeft - margin ); + + let scrollLeft = null; if ( leftOverflow > 0 ) { + scrollLeft = parentScroll - leftOverflow; + } else if ( rightOverflow > 0 ) { + 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: parentScroll - leftOverflow } ); - } else if ( rightOverflow > 0 ) { - parent.scroll?.( { left: parentScroll + rightOverflow } ); + parent.scroll?.( { left: scrollLeft } ); } }, [ margin, parent, rect ] ); }