implement feedback

packages/components/src/tabs/index.tsx

@@ -168,22 +168,20 @@ function Tabs( {
 		const currentItem = items.find( ( item ) => item.id === selectedId );
 		const activeElement = currentItem?.element?.ownerDocument.activeElement;
 
-		const tabsHasFocus =
-			activeElement &&
-			items.some( ( item ) => {
-				return activeElement === item.element;
-			} );
+		if (
+			! activeElement ||
+			! items.some( ( item ) => activeElement === item.element )
+		) {
+			return; // Return early if no tabs are focused.
+		}
+
 		const previousSelectedTabHadFocus =
 			typeof previousSelectedId === 'string' &&
 			previousSelectedId === activeElement?.id;
 
 		// If the previously selected tab had focus when the selection changed,
 		// move focus to the newly selected tab.
-		if (
-			tabsHasFocus &&
-			previousSelectedTabHadFocus &&
-			selectedId !== activeElement.id
-		) {
+		if ( previousSelectedTabHadFocus && selectedId !== activeElement.id ) {
 			move( selectedId );
 			return;
 		}
@@ -192,7 +190,7 @@ function Tabs( {
 		// selection changed, update the activeId to the currently focused tab.
 		// The activeId controls how arrow key navigation behaves. Keeping them
 		// in sync avoids confusion when navigating tabs with the keyboard.
-		if ( tabsHasFocus && ! previousSelectedTabHadFocus ) {
+		if ( ! previousSelectedTabHadFocus ) {
 			setActiveId( activeElement.id );
 		}
 	}, [

packages/components/src/tabs/stories/index.story.tsx

@@ -273,17 +273,29 @@ const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					<DropdownMenu
 						controls={ [
 							{
-								onClick: () => setSelectedTabId( 'tab1' ),
+								onClick: () =>
+									setTimeout(
+										() => setSelectedTabId( 'tab1' ),
+										3000
+									),
 								title: 'Tab 1',
 								isActive: selectedTabId === 'tab1',
 							},
 							{
-								onClick: () => setSelectedTabId( 'tab2' ),
+								onClick: () =>
+									setTimeout(
+										() => setSelectedTabId( 'tab2' ),
+										3000
+									),
 								title: 'Tab 2',
 								isActive: selectedTabId === 'tab2',
 							},
 							{
-								onClick: () => setSelectedTabId( 'tab3' ),
+								onClick: () =>
+									setTimeout(
+										() => setSelectedTabId( 'tab3' ),
+										3000
+									),
 								title: 'Tab 3',
 								isActive: selectedTabId === 'tab3',
 							},
@@ -299,6 +311,7 @@ const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
 export const ControlledMode = ControlledModeTemplate.bind( {} );
 ControlledMode.args = {
 	selectedTabId: 'tab3',
+	selectOnMove: false,
 };
 
 const TabBecomesDisabledTemplate: StoryFn< typeof Tabs > = ( props ) => {