Handle item ref in consumer

WordPress · May 17, 2023 · 2386400 · 2386400
1 parent d01d543
commit 2386400
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
@@ -88,7 +88,6 @@ const UnforwardedTabPanel = (
 		orientation = 'horizontal',
 		activeClass = 'is-active',
 		onSelect,
-		itemRef,
 	}: WordPressComponentProps< TabPanelProps, 'div', false >,
 	ref: ForwardedRef< any >
 ) => {
@@ -196,7 +195,6 @@ const UnforwardedTabPanel = (
 					role="tabpanel"
 					id={ `${ selectedId }-view` }
 					className="components-tab-panel__tab-content"
-					ref={ itemRef || undefined }
 				>
 					{ children( selectedTab ) }
 				</div>

diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -43,6 +43,12 @@ export default function ListViewSidebar() {
 	// This ref refers to the list view application area.
 	const listViewRef = useRef();
 
+	const listViewContainerRef = useMergeRefs( [
+		contentFocusReturnRef,
+		focusOnMountRef,
+		listViewRef,
+	] );
+
 	/*
 	 * Callback function to handle list view or outline focus.
 	 *
@@ -113,11 +119,6 @@ export default function ListViewSidebar() {
 			<TabPanel
 				ref={ tabPanelRef }
 				selectOnMove={ false }
-				itemRef={ useMergeRefs( [
-					contentFocusReturnRef,
-					focusOnMountRef,
-					listViewRef,
-				] ) }
 				tabs={ [
 					{
 						name: 'list-view',
@@ -132,7 +133,10 @@ export default function ListViewSidebar() {
 				] }
 			>
 				{ ( tab ) => (
-					<div className="edit-post-editor__list-view-container">
+					<div
+						className="edit-post-editor__list-view-container"
+						ref={ listViewContainerRef }
+					>
 						{ renderTabContent( tab.name ) }
 					</div>
 				) }