Number control does not update when using useArgs hook

Describe the bug I’m using useArgs hook in my component’s template to sync controls value when the state is changed via function handler.

// Brief view of the story ./stories/Counter.stories.tsx
const Template: ComponentStory<typeof Counter> = (args) => {
  const [{ primary, count }, updateArgs] = useArgs();
  const handleChange = () => updateArgs({ primary: !primary });
  const handleClickUp = () => updateArgs({ count: count + 1 });
  const handleClickDown = () => updateArgs({ count: count - 1 });

  return (
    <div>
      <Counter {...args} handleChange={handleChange} handleClickDown={handleClickDown} handleClickUp={handleClickUp} />
    </div>
  );
};

Everything works with boolean type, but when updateArgs updates a number, the control tab does not update and shows the previous/initial value.

To Reproduce Repo to reproduce: https://github.com/zygisau/use-args-number-type-control-bug-repro

1. Go to Example/Counter/Primary story (image below).

1. Press +1 a couple of times.

Expected behaviour

• Count value in the control tab is updated with the new value.

Actual behaviour

• Count value did not update (image below).

System

Environment Info:

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    Yarn: 3.0.1 - /mnt/c/Users/zygimantas/AppData/Roaming/npm/yarn
    npm: 6.14.12 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/addon-docs: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/addon-essentials: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/addon-links: ^6.4.0-alpha.32 => 6.4.0-alpha.32
    @storybook/react: ^6.4.0-alpha.32 => 6.4.0-alpha.32

Additional context

There are a few interesting points to note:

• Changing count values in the control tab updates every part of the story (component, control, url).
• As I mentioned, changing boolean value “Primary” updates control tab.
• One more thing to note, going from the Canvas tab to Docs updates the value.

[aritrakoley]

I see that there’s not been much activity for a while on this issue so I was trying to see if I could fix this. I have made a pull request with what I think is a fix for the issue. I’m still pretty new to open source contributions so if there’s anything I missed or need to do differently please let me know.

[patrick-mcdougle]

I think the bug is here: https://github.com/storybookjs/storybook/blob/next/lib/components/src/controls/Number.tsx#L31

We only use the value from “on high” to set the initial state. We need a useEffect hook that listens for changes to value and set the internal state based on this being changed.