From 9bc4b8a5660cf85e1de59772498aa5371398054a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 8 Jul 2020 11:19:25 +0100
Subject: [PATCH] Fix error triggered when a tab is removed from TabPanel
 component (#23784)

---
 packages/components/src/tab-panel/index.js    | 18 ++++++++++++------
 .../components/src/tab-panel/test/index.js    | 19 +++++++++++++------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/tab-panel/index.js b/packages/components/src/tab-panel/index.js
index 8ca38e19927b0d..fa867139c0339c 100644
--- a/packages/components/src/tab-panel/index.js
+++ b/packages/components/src/tab-panel/index.js
@@ -7,7 +7,7 @@ import { partial, noop, find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -39,9 +39,7 @@ export default function TabPanel( {
 	onSelect = noop,
 } ) {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
-	const [ selected, setSelected ] = useState(
-		initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : null )
-	);
+	const [ selected, setSelected ] = useState( null );
 
 	const handleClick = ( tabKey ) => {
 		setSelected( tabKey );
@@ -51,9 +49,17 @@ export default function TabPanel( {
 	const onNavigate = ( childIndex, child ) => {
 		child.click();
 	};
-
 	const selectedTab = find( tabs, { name: selected } );
-	const selectedId = `${ instanceId }-${ selectedTab.name }`;
+	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
+
+	useEffect( () => {
+		const newSelectedTab = find( tabs, { name: selected } );
+		if ( ! newSelectedTab ) {
+			setSelected(
+				initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : null )
+			);
+		}
+	}, [ tabs ] );
 
 	return (
 		<div className={ className }>
diff --git a/packages/components/src/tab-panel/test/index.js b/packages/components/src/tab-panel/test/index.js
index e3d511a554a27d..ad29ea67c32ed5 100644
--- a/packages/components/src/tab-panel/test/index.js
+++ b/packages/components/src/tab-panel/test/index.js
@@ -74,9 +74,12 @@ describe( 'TabPanel', () => {
 				},
 			};
 
-			const wrapper = TestUtils.renderIntoDocument(
-				getTestComponent( TabPanel, props )
-			);
+			let wrapper;
+			TestUtils.act( () => {
+				wrapper = TestUtils.renderIntoDocument(
+					getTestComponent( TabPanel, props )
+				);
+			} );
 
 			const alphaTab = getElementByClass( wrapper, 'alpha' );
 			const betaTab = getElementByClass( wrapper, 'beta' );
@@ -162,9 +165,13 @@ describe( 'TabPanel', () => {
 				);
 			},
 		};
-		const wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( TabPanel, props )
-		);
+
+		let wrapper;
+		TestUtils.act( () => {
+			wrapper = TestUtils.renderIntoDocument(
+				getTestComponent( TabPanel, props )
+			);
+		} );
 
 		const getActiveTab = () => getElementByClass( wrapper, 'active-tab' );
 		expect( getActiveTab().innerHTML ).toBe( 'Beta' );