Fix error triggered when a tab is removed from TabPanel component (#2…

…3784)
WordPress · Jul 8, 2020 · 9bc4b8a · 9bc4b8a
1 parent 7dee942
commit 9bc4b8a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git 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
@@ -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' );