Add "scroll into view" behavior to selected tabs.

WordPress · Aug 8, 2024 · 9979d58 · 9979d58
1 parent 2dda47d
commit 9979d58
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
@@ -27,15 +27,16 @@ export const TabList = forwardRef<
 	const context = useTabsContext();
 
 	const selectedId = context?.store.useState( 'selectedId' );
-	const indicatorPosition = useTrackElementOffsetRect(
-		context?.store.item( selectedId )?.element
-	);
+	const selectedElement = context?.store.item( selectedId )?.element;
+	const indicatorPosition = useTrackElementOffsetRect( selectedElement );
 
 	const [ animationEnabled, setAnimationEnabled ] = useState( false );
-	useOnValueUpdate(
-		selectedId,
-		( { previousValue } ) => previousValue && setAnimationEnabled( true )
-	);
+	useOnValueUpdate( selectedId, ( { previousValue } ) => {
+		selectedElement?.scrollIntoView( { behavior: 'instant' } );
+		if ( previousValue ) {
+			setAnimationEnabled( true );
+		}
+	} );
 
 	if ( ! context ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );