Merge pull request storybookjs#35018 from cssinate/next

Docs: Fix Controls losing focus when subcomponents are defined

Author: Sidnioulz

code/addons/docs/src/blocks/blocks/Controls.stories.tsx

@@ -4,7 +4,7 @@ import type { PlayFunctionContext } from 'storybook/internal/csf';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { expect, within } from 'storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 
 import * as ExampleStories from '../examples/ControlsParameters.stories';
 import * as SubcomponentsExampleStories from '../examples/ControlsWithSubcomponentsParameters.stories';
@@ -120,6 +120,24 @@ export const SubcomponentsOfStory: Story = {
   },
 };
 
+/**
+ * When a component declares subcomponents, editing a control on the main component tab should not
+ * remount the input and drop focus. This verifies the fix for
+ * https://github.com/storybookjs/storybook/issues/29028
+ */
+export const SubcomponentsRetainControlFocus: Story = {
+  args: {
+    of: SubcomponentsExampleStories.NoParameters,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByDisplayValue('b');
+    await userEvent.click(input);
+    await userEvent.type(input, 'x');
+    await expect(document.activeElement).toBe(input);
+  },
+};
+
 export const SubcomponentsIncludeProp: Story = {
   args: {
     of: SubcomponentsExampleStories.NoParameters,

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx

@@ -1,10 +1,17 @@
+import React, { useState } from 'react';
+
 import { TabsView } from 'storybook/internal/components';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { expect, userEvent, within } from 'storybook/test';
+
+import * as ArgRow from './ArgRow.stories';
 import { ArgsTable } from './ArgsTable';
 import { Compact, Normal, Sections } from './ArgsTable.stories';
+import type { TabbedArgsTableProps } from './TabbedArgsTable';
 import { TabbedArgsTable } from './TabbedArgsTable';
+import type { Args } from './types';
 
 const meta = {
   component: TabbedArgsTable,
@@ -57,3 +64,42 @@ export const WithContentAround: StoryObj<typeof meta> = {
     </>
   ),
 };
+
+/**
+ * When multiple tabs are shown, editing a control on the first tab should not remount the input and
+ * drop focus. This verifies the fix for https://github.com/storybookjs/storybook/issues/29028
+ */
+export const RetainControlFocusWithTabs: StoryObj<typeof meta> = {
+  args: {
+    tabs: {
+      Main: {
+        rows: {
+          someString: ArgRow.String.args.row,
+        },
+      },
+      Other: {
+        rows: {
+          numberType: ArgRow.Number.args.row,
+        },
+      },
+    },
+    args: { someString: 'hello' },
+  },
+  render: function Render(props) {
+    const [storyArgs, setStoryArgs] = useState<Args>({ someString: 'hello' });
+    return (
+      <TabbedArgsTable
+        {...(props as TabbedArgsTableProps)}
+        args={storyArgs}
+        updateArgs={(updated) => setStoryArgs((prev) => ({ ...prev, ...updated }))}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = await canvas.findByDisplayValue('hello');
+    await userEvent.click(input);
+    await userEvent.type(input, 'x');
+    await expect(document.activeElement).toBe(input);
+  },
+};

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx

@@ -25,20 +25,19 @@ export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) =>
     return <ArgsTable {...entries[0][1]} {...props} />;
   }
 
-  const tabsFromEntries = entries.map(([label, table], index) => ({
-    id: `prop_table_div_${label}`,
-    title: label,
-    children: () => {
-      /**
-       * The first tab is the main component, controllable if in the Controls block All other tabs
-       * are subcomponents, never controllable, so we filter out the props indicating
-       * controllability Essentially all subcomponents always behave like ArgTypes, never Controls
-       */
-      const argsTableProps = index === 0 ? props : { sort: props.sort };
-
-      return <ArgsTable inTabPanel key={`prop_table_${label}`} {...table} {...argsTableProps} />;
-    },
-  }));
+  const tabsFromEntries = entries.map(([label, table], index) => {
+    // The first tab is the main component, controllable if in the Controls block. All other tabs
+    // are subcomponents, never controllable, so we filter out the props indicating
+    // controllability. Pass a stable element (not an inline function component) so React
+    // reconciles the tab panel instead of remounting it on every args update.
+    const argsTableProps = index === 0 ? props : { sort: props.sort };
+
+    return {
+      id: `prop_table_div_${label}`,
+      title: label,
+      children: <ArgsTable inTabPanel {...table} {...argsTableProps} />,
+    };
+  });
 
   return <StyledTabsView tabs={tabsFromEntries} />;
 };