Storybook: Cannot reuse the callback passed in args to trigger action manually when with useArgs

[y-nk]

Describe the bug
When using controls with useArgs to create a double binding, one can no longer use actions as well.

To Reproduce
Steps to reproduce the behavior:

1. Minimal story usecase:

import React from 'react';
import { useArgs } from '@storybook/client-api';

export const MyDefaultStory = args => {
  const [{ value }, updateArgs] = useArgs();
  const { onChange, ...props } = args;

  const toggleValue = () => {
    onChange();
    updateArgs({ value: !value });
  }

  return <SomeBasicSwitchComponent {...props} onChange={toggleValue} />;
};

MyDefaultStory.args = {
  value: false,
};

MyDefaultStory.argTypes = {
  value: { control: { type: 'boolean' } },
  onChange: { action: 'Changed!' },
};

Variations which product the same effect:

import React from 'react';
import { useArgs } from '@storybook/client-api';

export const MyDefaultStory = args => {
  const [{ value, onChange }, updateArgs] = useArgs();

  const toggleValue = () => {
    onChange();
    updateArgs({ value: !value });
  }

  return <SomeBasicSwitchComponent {...args} onChange={toggleValue} />;
};

MyDefaultStory.args = {
  value: false,
};

MyDefaultStory.argTypes = {
  value: { control: { type: 'boolean' } },
  onChange: { action: 'Changed!' },
};

import React, { useCallback } from 'react';
import { useArgs } from '@storybook/client-api';
import { action } from '@storybook/addon-actions';

export const MyDefaultStory = args => {
  const [{ value }, updateArgs] = useArgs();
  const onChange = useCallback(action('Changed!'));

  const toggleValue = () => {
    onChange();
    updateArgs({ value: !value });
  }

  return <SomeBasicSwitchComponent {...args} onChange={toggleValue} />;
};

MyDefaultStory.args = {
  value: false,
};

MyDefaultStory.argTypes = {
  value: { control: { type: 'boolean' } },
};

Expected behavior
The logging function onChange logs in the action panel as expected.

What actually happen
The log appears for a brief instant and is cleared later on (if you spam the component, you can actually see it appear/disappear)

Notes
I'm sensing something related to the double binding with useArgs and the refresh of the panels, but have no further clue.

System:

Environment Info:

  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    npm: 6.14.8 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.102
  npmPackages:
    @storybook/addon-a11y: ^6.0.21 => 6.0.21
    @storybook/addon-actions: ^6.0.21 => 6.0.21
    @storybook/addon-controls: ^6.0.21 => 6.0.21
    @storybook/addon-storysource: ^6.0.16 => 6.0.16
    @storybook/addon-viewport: ^6.0.21 => 6.0.21
    @storybook/addons: ^6.0.21 => 6.0.21
    @storybook/client-api: ^6.0.21 => 6.0.21
    @storybook/react: ^6.0.16 => 6.0.16
    @storybook/theming: ^6.0.21 => 6.0.21

[shilman]

@tmeasday can you take a look?

[tmeasday]

@y-nk do you have a reproduction uploaded somewhere? It sounds like the actions panel is refreshing, like it thinks you are changing story or something..

[y-nk]

@shilman @tmeasday

Here's a very minimal repro. You can spam click the checkbox to see the log in actions reset itself ; also the onChange action in argTypes shows in controls (but that's not so problematic since it's just display).

https://codesandbox.io/s/inspiring-stonebraker-9m1f3

[tmeasday]

Thanks for the reproduction @y-nk.

So the issue is pretty simple, really. The actions addon clears itself whenever the story rerenders:

https://github.com/storybookjs/storybook/blob/a56b8d6ec266342acd9441f7219097fdc9cbad49/addons/actions/src/containers/ActionLogger/index.tsx#L42:L42

This will mean actions will clear whenever you change a control value.

The idea as you can see there is to clear on story change (there's even an option clearOnStoryChange to control this). However, that's the wrong event to use for that. It should use STORY_CHANGED.

Would you like to send a PR with a fix?

[y-nk]

@tmeasday i'll try to work on this next week :) thanks a lot for your guidance !

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.15 containing PR #12500 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.