Merge pull request #14493 from storybookjs/reset-argstable-state

Controls: Reset ArgsTable state when switching stories
storybookjs · Apr 7, 2021 · f915818 · f915818
2 parents 7c98401 + 0e73dc3
commit f915818
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/addons/controls/src/ControlsPanel.tsx b/addons/controls/src/ControlsPanel.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { ArgTypes, useArgs, useArgTypes, useParameter } from '@storybook/api';
+import { ArgTypes, useArgs, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
 import { ArgsTable, NoControlsWarning, PresetColor, SortType } from '@storybook/components';
 
 import { PARAM_KEY } from './constants';
@@ -21,6 +21,7 @@ export const ControlsPanel: FC = () => {
     presetColors,
     hideNoControlsWarning = false,
   } = useParameter<ControlsParameters>(PARAM_KEY, {});
+  const { path } = useStorybookState();
 
   const hasControls = Object.values(rows).some((arg) => arg?.control);
   const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
@@ -36,6 +37,7 @@ export const ControlsPanel: FC = () => {
       {showWarning && <NoControlsWarning />}
       <ArgsTable
         {...{
+          key: path, // resets state when switching stories
           compact: !expanded && hasControls,
           rows: withPresetColors,
           args,

diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx
@@ -218,14 +218,17 @@ const useColorInput = (initialValue: string, onChange: (value: string) => string
     colorSpace,
   ]);
 
-  const updateValue = useCallback((update: string) => {
-    const parsed = parseValue(update);
-    setValue(parsed?.value || update || '');
-    if (!parsed) return;
-    setColor(parsed);
-    setColorSpace(parsed.colorSpace);
-    onChange(parsed.value);
-  }, []);
+  const updateValue = useCallback(
+    (update: string) => {
+      const parsed = parseValue(update);
+      setValue(parsed?.value || update || '');
+      if (!parsed) return;
+      setColor(parsed);
+      setColorSpace(parsed.colorSpace);
+      onChange(parsed.value);
+    },
+    [onChange]
+  );
 
   const cycleColorSpace = useCallback(() => {
     let next = COLOR_SPACES.indexOf(colorSpace) + 1;
@@ -234,7 +237,7 @@ const useColorInput = (initialValue: string, onChange: (value: string) => string
     const update = color?.[COLOR_SPACES[next]] || '';
     setValue(update);
     onChange(update);
-  }, [color, colorSpace]);
+  }, [color, colorSpace, onChange]);
 
   return { value, realValue, updateValue, color, colorSpace, cycleColorSpace };
 };