From a5750c51239540df8ed9019b34f3327161596c4e Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Mon, 6 Jul 2020 16:11:45 +0800
Subject: [PATCH] Controls: Fix object story switching

---
 .../official-storybook/stories/addon-controls.stories.tsx  | 7 +++++++
 lib/components/src/controls/Object.tsx                     | 7 ++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx
index c4b7597f18e..1b1d61fa1dd 100644
--- a/examples/official-storybook/stories/addon-controls.stories.tsx
+++ b/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({});
diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx
index f0a68134a51..e39d7ad1364 100644
--- 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 {