From ea1e3233e0ba25e181c87a19cd557fa113fd9c8f Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 1 Dec 2023 11:09:01 -0500
Subject: [PATCH] use `items` to find active element, instead of a ref

---
 packages/components/src/tabs/index.tsx | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
index f35090584755a4..7f738cb9f08a96 100644
--- a/packages/components/src/tabs/index.tsx
+++ b/packages/components/src/tabs/index.tsx
@@ -47,13 +47,6 @@ function Tabs( {
 	const { items, selectedId } = store.useState();
 	const { setSelectedId, move } = store;
 
-	const tabsRef = useRef< HTMLDivElement >( null );
-	const tabsHasFocus =
-		!! tabsRef.current?.ownerDocument.activeElement &&
-		items
-			.map( ( item ) => item.id )
-			.includes( tabsRef.current?.ownerDocument.activeElement.id );
-
 	// Keep track of whether tabs have been populated. This is used to prevent
 	// certain effects from firing too early while tab data and relevant
 	// variables are undefined during the initial render.
@@ -167,14 +160,20 @@ function Tabs( {
 		if ( ! isControlled || ! selectOnMove ) {
 			return;
 		}
+		const currentItem = items.find( ( item ) => item.id === selectedId );
+		const activeElement = currentItem?.element?.ownerDocument.activeElement;
+		const tabsHasFocus = items.some( ( item ) => {
+			return activeElement && activeElement === item.element;
+		} );
 
 		if (
+			activeElement &&
 			tabsHasFocus &&
-			selectedId !== tabsRef.current?.ownerDocument.activeElement.id
+			selectedId !== activeElement.id
 		) {
 			move( selectedId );
 		}
-	}, [ isControlled, move, selectOnMove, selectedId, tabsHasFocus ] );
+	}, [ isControlled, items, move, selectOnMove, selectedId ] );
 
 	const contextValue = useMemo(
 		() => ( {
@@ -185,11 +184,9 @@ function Tabs( {
 	);
 
 	return (
-		<div ref={ tabsRef }>
-			<TabsContext.Provider value={ contextValue }>
-				{ children }
-			</TabsContext.Provider>
-		</div>
+		<TabsContext.Provider value={ contextValue }>
+			{ children }
+		</TabsContext.Provider>
 	);
 }