From 5c779ce2243f04c3bf54a8bc6a4b393d4b1cd539 Mon Sep 17 00:00:00 2001
From: Seydi Charyyev <seydi.charyev@gmail.com>
Date: Thu, 5 Mar 2026 10:21:33 +0500
Subject: [PATCH 1/2] fix: ensure unique control id attributes across multiple
 Controls blocks on docs page

---
 code/addons/docs/src/blocks/blocks/Controls.tsx     |  2 ++
 .../src/blocks/components/ArgsTable/ArgControl.tsx  | 13 +++++++++++--
 .../docs/src/blocks/components/ArgsTable/ArgRow.tsx |  1 +
 .../src/blocks/components/ArgsTable/ArgsTable.tsx   |  4 +++-
 code/addons/docs/src/blocks/controls/Boolean.tsx    |  5 +++--
 code/addons/docs/src/blocks/controls/Color.tsx      |  3 ++-
 code/addons/docs/src/blocks/controls/Date.tsx       | 12 ++++++++++--
 code/addons/docs/src/blocks/controls/Files.tsx      |  3 ++-
 code/addons/docs/src/blocks/controls/Number.tsx     |  5 +++--
 code/addons/docs/src/blocks/controls/Object.tsx     |  6 +++---
 code/addons/docs/src/blocks/controls/Range.tsx      |  3 ++-
 code/addons/docs/src/blocks/controls/Text.tsx       |  5 +++--
 .../addons/docs/src/blocks/controls/helpers.test.ts |  8 ++++++++
 code/addons/docs/src/blocks/controls/helpers.ts     | 10 ++++++++--
 .../docs/src/blocks/controls/options/Checkbox.tsx   |  3 ++-
 .../docs/src/blocks/controls/options/Radio.tsx      |  3 ++-
 .../docs/src/blocks/controls/options/Select.tsx     |  8 ++++----
 code/addons/docs/src/blocks/controls/types.ts       |  1 +
 18 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/Controls.tsx b/code/addons/docs/src/blocks/blocks/Controls.tsx
index 5f7e9eee69fa..2e614f9f881c 100644
--- a/code/addons/docs/src/blocks/blocks/Controls.tsx
+++ b/code/addons/docs/src/blocks/blocks/Controls.tsx
@@ -69,6 +69,7 @@ export const Controls: FC<ControlsProps> = (props) => {
     }
     return (
       <PureArgsTable
+        storyId={story.id}
         rows={filteredArgTypes as any}
         sort={sort}
         args={args}
@@ -101,6 +102,7 @@ export const Controls: FC<ControlsProps> = (props) => {
       globals={globals}
       updateArgs={updateArgs}
       resetArgs={resetArgs}
+      storyId={story.id}
     />
   );
 };
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
index dd6f7a997544..97d3013b4bd8 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
@@ -21,6 +21,7 @@ export interface ArgControlProps {
   arg: any;
   updateArgs: (args: Args) => void;
   isHovered: boolean;
+  storyId?: string;
 }
 
 const Controls: Record<string, FC<any>> = {
@@ -43,7 +44,7 @@ const Controls: Record<string, FC<any>> = {
 
 const NoControl = () => <>-</>;
 
-export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovered }) => {
+export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovered, storyId }) => {
   const { key, control } = row;
 
   const [isFocused, setFocused] = useState(false);
@@ -84,7 +85,15 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovere
   }
   // row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
   // row.key is a hash key and therefore a much safer choice
-  const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
+  const props = {
+    name: key,
+    storyId,
+    argType: row,
+    value: boxedValue.value,
+    onChange,
+    onBlur,
+    onFocus,
+  };
   const Control = Controls[control.type] || NoControl;
   return <Control {...props} {...control} controlType={control.type} />;
 };
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
index c6ccb0099ae2..83ad20c476ac 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
@@ -21,6 +21,7 @@ interface ArgRowProps {
   compact?: boolean;
   expandable?: boolean;
   initialExpandedArgs?: boolean;
+  storyId?: string;
 }
 
 const Name = styled.span({ fontWeight: 'bold' });
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
index 874edbc2ccc2..1f1dfc4394a5 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -204,6 +204,7 @@ export interface ArgsTableOptionProps {
   initialExpandedArgs?: boolean;
   isLoading?: boolean;
   sort?: SortType;
+  storyId?: string;
 }
 interface ArgsTableDataProps {
   rows: ArgTypes;
@@ -327,6 +328,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     initialExpandedArgs,
     sort = 'none',
     isLoading,
+    storyId,
   } = props;
 
   if ('error' in props) {
@@ -380,7 +382,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   }
   const expandable = Object.keys(groups.sections).length > 0;
 
-  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs };
+  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs, storyId };
 
   return (
     <ResetWrapper>
diff --git a/code/addons/docs/src/blocks/controls/Boolean.tsx b/code/addons/docs/src/blocks/controls/Boolean.tsx
index 584ed2a6d0e0..b94b9fe500ee 100644
--- a/code/addons/docs/src/blocks/controls/Boolean.tsx
+++ b/code/addons/docs/src/blocks/controls/Boolean.tsx
@@ -116,6 +116,7 @@ export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
  */
 export const BooleanControl: FC<BooleanProps> = ({
   name,
+  storyId,
   value,
   onChange,
   onBlur,
@@ -130,7 +131,7 @@ export const BooleanControl: FC<BooleanProps> = ({
         ariaLabel={false}
         variant="outline"
         size="medium"
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, storyId)}
         onClick={onSetFalse}
         disabled={readonly}
       >
@@ -138,7 +139,7 @@ export const BooleanControl: FC<BooleanProps> = ({
       </Button>
     );
   }
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   const parsedValue = typeof value === 'string' ? parse(value) : value;
 
diff --git a/code/addons/docs/src/blocks/controls/Color.tsx b/code/addons/docs/src/blocks/controls/Color.tsx
index 0758f7b8611c..2f923c0aeda3 100644
--- a/code/addons/docs/src/blocks/controls/Color.tsx
+++ b/code/addons/docs/src/blocks/controls/Color.tsx
@@ -360,6 +360,7 @@ const usePresets = (
 export type ColorControlProps = ControlProps<ColorValue> & ColorConfig;
 export const ColorControl: FC<ColorControlProps> = ({
   name,
+  storyId,
   value: initialValue,
   onChange,
   onFocus,
@@ -377,7 +378,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   const Picker = ColorPicker[colorSpace];
 
   const readOnly = !!argType?.table?.readonly;
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <Wrapper>
diff --git a/code/addons/docs/src/blocks/controls/Date.tsx b/code/addons/docs/src/blocks/controls/Date.tsx
index 3568cf940f5c..55fe0063bb71 100644
--- a/code/addons/docs/src/blocks/controls/Date.tsx
+++ b/code/addons/docs/src/blocks/controls/Date.tsx
@@ -66,7 +66,15 @@ const FlexSpaced = styled.fieldset({
 });
 
 export type DateProps = ControlProps<DateValue> & DateConfig;
-export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onBlur, argType }) => {
+export const DateControl: FC<DateProps> = ({
+  name,
+  storyId,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  argType,
+}) => {
   const [valid, setValid] = useState(true);
   const dateRef = useRef<HTMLInputElement>();
   const timeRef = useRef<HTMLInputElement>();
@@ -114,7 +122,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
     setValid(!!time);
   };
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <FlexSpaced>
diff --git a/code/addons/docs/src/blocks/controls/Files.tsx b/code/addons/docs/src/blocks/controls/Files.tsx
index 1569790641da..85f2d839701a 100644
--- a/code/addons/docs/src/blocks/controls/Files.tsx
+++ b/code/addons/docs/src/blocks/controls/Files.tsx
@@ -40,6 +40,7 @@ function revokeOldUrls(urls: string[]) {
 export const FilesControl: FC<FilesControlProps> = ({
   onChange,
   name,
+  storyId,
   accept = 'image/*',
   value,
   argType,
@@ -63,7 +64,7 @@ export const FilesControl: FC<FilesControlProps> = ({
     }
   }, [value, name]);
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <>
diff --git a/code/addons/docs/src/blocks/controls/Number.tsx b/code/addons/docs/src/blocks/controls/Number.tsx
index 947a9f7afca7..a3f33db74de7 100644
--- a/code/addons/docs/src/blocks/controls/Number.tsx
+++ b/code/addons/docs/src/blocks/controls/Number.tsx
@@ -27,6 +27,7 @@ const FormInput = styled(Form.Input)(({ theme }) => ({
 
 export const NumberControl: FC<NumberProps> = ({
   name,
+  storyId,
   value,
   onChange,
   min,
@@ -102,7 +103,7 @@ export const NumberControl: FC<NumberProps> = ({
         ariaLabel={false}
         variant="outline"
         size="medium"
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, storyId)}
         onClick={onForceVisible}
         disabled={readonly}
       >
@@ -115,7 +116,7 @@ export const NumberControl: FC<NumberProps> = ({
     <Wrapper>
       <FormInput
         ref={htmlElRef}
-        id={getControlId(name)}
+        id={getControlId(name, storyId)}
         type="number"
         onChange={handleChange}
         size="flex"
diff --git a/code/addons/docs/src/blocks/controls/Object.tsx b/code/addons/docs/src/blocks/controls/Object.tsx
index e63b63d7f9a7..a724dfb9d0a7 100644
--- a/code/addons/docs/src/blocks/controls/Object.tsx
+++ b/code/addons/docs/src/blocks/controls/Object.tsx
@@ -163,7 +163,7 @@ const selectValue = (event: SyntheticEvent<HTMLInputElement>) => {
 
 export type ObjectProps = ControlProps<ObjectValue> & ObjectConfig;
 
-export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType }) => {
+export const ObjectControl: FC<ObjectProps> = ({ name, storyId, value, onChange, argType }) => {
   const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
@@ -208,7 +208,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
       <Button
         ariaLabel={false}
         disabled={readonly}
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, storyId)}
         onClick={onForceVisible}
       >
         Set object
@@ -219,7 +219,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
   const rawJSONForm = (
     <RawInput
       ref={htmlElRef}
-      id={getControlId(name)}
+      id={getControlId(name, storyId)}
       minRows={3}
       name={name}
       key={jsonString}
diff --git a/code/addons/docs/src/blocks/controls/Range.tsx b/code/addons/docs/src/blocks/controls/Range.tsx
index 28f0149cdc21..61878d0fe909 100644
--- a/code/addons/docs/src/blocks/controls/Range.tsx
+++ b/code/addons/docs/src/blocks/controls/Range.tsx
@@ -177,6 +177,7 @@ function getNumberOfDecimalPlaces(number: number) {
 
 export const RangeControl: FC<RangeProps> = ({
   name,
+  storyId,
   value,
   onChange,
   min = 0,
@@ -194,7 +195,7 @@ export const RangeControl: FC<RangeProps> = ({
   const numberOFDecimalsPlaces = useMemo(() => getNumberOfDecimalPlaces(step), [step]);
 
   const readonly = !!argType?.table?.readonly;
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <RangeWrapper readOnly={readonly}>
diff --git a/code/addons/docs/src/blocks/controls/Text.tsx b/code/addons/docs/src/blocks/controls/Text.tsx
index 93d370cc35b2..4723e9e5de68 100644
--- a/code/addons/docs/src/blocks/controls/Text.tsx
+++ b/code/addons/docs/src/blocks/controls/Text.tsx
@@ -22,6 +22,7 @@ const MaxLength = styled.div<{ isMaxed: boolean }>(({ isMaxed }) => ({
 
 export const TextControl: FC<TextProps> = ({
   name,
+  storyId,
   value,
   onChange,
   onFocus,
@@ -49,7 +50,7 @@ export const TextControl: FC<TextProps> = ({
         variant="outline"
         size="medium"
         disabled={readonly}
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, storyId)}
         onClick={onForceVisible}
       >
         Set string
@@ -62,7 +63,7 @@ export const TextControl: FC<TextProps> = ({
   return (
     <Wrapper>
       <Form.Textarea
-        id={getControlId(name)}
+        id={getControlId(name, storyId)}
         maxLength={maxLength}
         onChange={handleChange}
         disabled={readonly}
diff --git a/code/addons/docs/src/blocks/controls/helpers.test.ts b/code/addons/docs/src/blocks/controls/helpers.test.ts
index aa560a1f3c49..b5661e024238 100644
--- a/code/addons/docs/src/blocks/controls/helpers.test.ts
+++ b/code/addons/docs/src/blocks/controls/helpers.test.ts
@@ -11,6 +11,10 @@ describe('getControlId', () => {
   ])('%s', (name, input, expected) => {
     expect(getControlId(input)).toBe(expected);
   });
+
+  it('includes storyId when provided', () => {
+    expect(getControlId('some-id', 'story--name')).toBe('control-story--name-some-id');
+  });
 });
 
 describe('getControlSetterButtonId', () => {
@@ -22,4 +26,8 @@ describe('getControlSetterButtonId', () => {
   ])('%s', (name, input, expected) => {
     expect(getControlSetterButtonId(input)).toBe(expected);
   });
+
+  it('includes storyId when provided', () => {
+    expect(getControlSetterButtonId('some-id', 'story--name')).toBe('set-story--name-some-id');
+  });
 });
diff --git a/code/addons/docs/src/blocks/controls/helpers.ts b/code/addons/docs/src/blocks/controls/helpers.ts
index 9153d81fb526..b9895c7eb293 100644
--- a/code/addons/docs/src/blocks/controls/helpers.ts
+++ b/code/addons/docs/src/blocks/controls/helpers.ts
@@ -10,7 +10,10 @@
  *
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  */
-export const getControlId = (value: string) => `control-${value.replace(/\s+/g, '-')}`;
+export const getControlId = (value: string, storyId?: string) => {
+  const base = value.replace(/\s+/g, '-');
+  return storyId ? `control-${storyId}-${base}` : `control-${base}`;
+};
 
 /**
  * Adds `set` prefix to make ID attribute more specific. Removes spaces because spaces are not
@@ -24,4 +27,7 @@ export const getControlId = (value: string) => `control-${value.replace(/\s+/g,
  *
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  */
-export const getControlSetterButtonId = (value: string) => `set-${value.replace(/\s+/g, '-')}`;
+export const getControlSetterButtonId = (value: string, storyId?: string) => {
+  const base = value.replace(/\s+/g, '-');
+  return storyId ? `set-${storyId}-${base}` : `set-${base}`;
+};
diff --git a/code/addons/docs/src/blocks/controls/options/Checkbox.tsx b/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
index 4e7e5861b30c..f1d891a2252b 100644
--- a/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
@@ -56,6 +56,7 @@ type CheckboxConfig = NormalizedOptionsConfig & { isInline: boolean };
 type CheckboxProps = ControlProps<OptionsMultiSelection> & CheckboxConfig;
 export const CheckboxControl: FC<CheckboxProps> = ({
   name,
+  storyId,
   options,
   value,
   onChange,
@@ -88,7 +89,7 @@ export const CheckboxControl: FC<CheckboxProps> = ({
     setSelected(selectedKeys(value || [], options));
   }, [value]);
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   return (
     <Wrapper $isInline={isInline}>
diff --git a/code/addons/docs/src/blocks/controls/options/Radio.tsx b/code/addons/docs/src/blocks/controls/options/Radio.tsx
index b3d29b4027c1..c161119747f0 100644
--- a/code/addons/docs/src/blocks/controls/options/Radio.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Radio.tsx
@@ -56,6 +56,7 @@ type RadioConfig = NormalizedOptionsConfig & { isInline: boolean };
 type RadioProps = ControlProps<OptionsSingleSelection> & RadioConfig;
 export const RadioControl: FC<RadioProps> = ({
   name,
+  storyId,
   options,
   value,
   onChange,
@@ -67,7 +68,7 @@ export const RadioControl: FC<RadioProps> = ({
     return <>-</>;
   }
   const selection = selectedKey(value, options);
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   const readonly = !!argType?.table?.readonly;
 
diff --git a/code/addons/docs/src/blocks/controls/options/Select.tsx b/code/addons/docs/src/blocks/controls/options/Select.tsx
index 334c12e6cf4c..232c0ca12842 100644
--- a/code/addons/docs/src/blocks/controls/options/Select.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Select.tsx
@@ -104,12 +104,12 @@ type SelectProps = ControlProps<OptionsSelection> & SelectConfig;
 
 const NO_SELECTION = 'Choose option...';
 
-const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange, argType }) => {
+const SingleSelect: FC<SelectProps> = ({ name, storyId, value, options, onChange, argType }) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     onChange(options[e.currentTarget.value]);
   };
   const selection = selectedKey(value, options) || NO_SELECTION;
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   const readonly = !!argType?.table?.readonly;
 
@@ -133,7 +133,7 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange, argType
   );
 };
 
-const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange, argType }) => {
+const MultiSelect: FC<SelectProps> = ({ name, storyId, value, options, onChange, argType }) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const selection = Array.from(e.currentTarget.options)
       .filter((option) => option.selected)
@@ -141,7 +141,7 @@ const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange, argType
     onChange(selectedValues(selection, options));
   };
   const selection = selectedKeys(value, options);
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, storyId);
 
   const readonly = !!argType?.table?.readonly;
 
diff --git a/code/addons/docs/src/blocks/controls/types.ts b/code/addons/docs/src/blocks/controls/types.ts
index c080d54bccc4..1c63922e1961 100644
--- a/code/addons/docs/src/blocks/controls/types.ts
+++ b/code/addons/docs/src/blocks/controls/types.ts
@@ -2,6 +2,7 @@ import type { ArgType } from '../components/ArgsTable/types';
 
 export interface ControlProps<T> {
   name: string;
+  storyId?: string;
   value?: T;
   defaultValue?: T;
   argType?: ArgType;

From 3edb53818b179077b35b4368a2f5d694227af7f9 Mon Sep 17 00:00:00 2001
From: Seydi Charyyev <seydi.charyev@gmail.com>
Date: Fri, 6 Mar 2026 09:25:43 +0500
Subject: [PATCH 2/2] test: add story for multiple Controls blocks on same docs
 page

---
 .../src/blocks/blocks/Controls.stories.tsx    | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/code/addons/docs/src/blocks/blocks/Controls.stories.tsx b/code/addons/docs/src/blocks/blocks/Controls.stories.tsx
index b029147036a9..0a312c1e2f55 100644
--- a/code/addons/docs/src/blocks/blocks/Controls.stories.tsx
+++ b/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 { within } from 'storybook/test';
+import { expect, within } from 'storybook/test';
 
 import * as ExampleStories from '../examples/ControlsParameters.stories';
 import * as SubcomponentsExampleStories from '../examples/ControlsWithSubcomponentsParameters.stories';
@@ -159,3 +159,25 @@ export const EmptyArgTypes: Story = {
     of: EmptyArgTypesStories.Default,
   },
 };
+
+/**
+ * When multiple Controls blocks for different stories are on the same docs page, each control
+ * should have a unique id attribute (scoped by storyId). This verifies the fix for
+ * https://github.com/storybookjs/storybook/issues/26144
+ */
+export const MultipleControlsOnSamePage: Story = {
+  render: () => (
+    <>
+      <Controls of={ExampleStories.NoParameters} />
+      <Controls of={ExampleStories.Include} />
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const allIds = Array.from(canvasElement.querySelectorAll('[id^="control-"]')).map(
+      (el) => el.id
+    );
+    const uniqueIds = new Set(allIds);
+    await expect(allIds.length).toBeGreaterThan(0);
+    await expect(uniqueIds.size).toBe(allIds.length);
+  },
+};