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 <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: ciampo <[email protected]>
WordPress · Nov 4, 2024 · b992649 · b992649
1 parent 5445afc
commit b992649
Showing 1 changed file with 13 additions and 2 deletions.
diff --git 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 ] );
 }