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

Controls: Fix object control for story switching

examples/official-storybook/stories/addon-controls.stories.tsx

@@ -4,6 +4,11 @@ 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} />;
@@ -11,12 +16,14 @@ 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({});

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 {