Merge pull request #11432 from storybookjs/fix-object-control

Controls: Fix object control for story switching
storybookjs · Jul 6, 2020 · 5a9f875 · 5a9f875
2 parents d706f55 + a5750c5
commit 5a9f875
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx
@@ -4,19 +4,26 @@ import Button from '../components/TsButton';
 export default {
   title: 'Addons/Controls',
   component: Button,
+  argTypes: {
+    children: { control: 'text' },
+    type: { control: 'text' },
+    somethingElse: { control: 'object' },
+  },
 };
 
 const Story = (args) => <Button {...args} />;
 
 export const Basic = Story.bind({});
 Basic.args = {
   children: 'basic',
+  somethingElse: { a: 2 },
 };
 
 export const Action = Story.bind({});
 Action.args = {
   children: 'hmmm',
   type: 'action',
+  somethingElse: { a: 4 },
 };
 
 export const CustomControls = Story.bind({});

diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ChangeEvent, useState, useCallback } from 'react';
+import React, { FC, ChangeEvent, useState, useCallback, useEffect } from 'react';
 import { styled } from '@storybook/theming';
 
 import deepEqual from 'fast-deep-equal';
@@ -36,6 +36,11 @@ export const ObjectControl: FC<ObjectProps> = ({
   const [valid, setValid] = useState(true);
   const [text, setText] = useState(format(value));
 
+  useEffect(() => {
+    const newText = format(value);
+    if (text !== newText) setText(newText);
+  }, [value]);
+
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       try {