Storybook: Default for function prop overrides action argType

[kazdegroot]

Describe the bug
When creating a story for a component that sets empty functions as defaults for (some) event handling props, the default functions get passed in through args, even though the argType for the prop is set to { action: 'actionName'}.

To Reproduce
Steps to reproduce the behavior:

1. Create a component that accepts a function as a prop.
2. Give the prop a function as default value (e.g. () => {})
3. Create a story, which sets the argType for the prop to {action: 'actionName'}
4. Trigger the function in storybook.

Expected behavior
A log of the action 'actionName' in the Actions tab.

Code snippets
TestStory.js:

import React from 'react';

const TestStory = ({ onClick = () => { console.log('test') } }) => <button onClick={onClick}>Click me!</button>;

export default TestStory;

TestStory.stories.js:

import React from 'react';
import TestStory from './TestStory';

export default {
  title: 'core/Test case',
  component: TestStory,
  args: {},
  argTypes: {
    onClick: { action: 'onClick', control: null }
  }
};

export const Default = args => {
  console.log(args.onClick);
  return <TestStory {...args} />;
};

System:
Environment Info:

System:
OS: macOS 10.15.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.7 - ~/.nvm/versions/node/v12.13.1/bin/npm
Browsers:
Chrome: 84.0.4147.135
Safari: 13.1.2

Additional context
If the component is in the same file as the story, the problem doesn't occur. If storybook is unable to fetch info about the components properties the issue also doesn't occur: when storybook is unable to prefill the ArgTable in the Controls tab.

[shilman]

Do you have a reproduction?

[kazdegroot]

The two code snippets together are the smallest scenario I could find that (in our environment) shows the issue.

[yannickcornaille]

I have the same behavior.
A basic button (Button.js) :

import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ label, onClick }) => {
  return (
    <button onClick={onClick} type="button">
      {label}
    </button>
  );
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  onClick: () => {},
};

export default Button;

And the story (Button.stories.js) :

export default {
  component: Button,
  title: 'Button',
  argTypes: { onClick: { action: 'clicked' } },
};

const Template = (args) => <Button {...args} />;

export const Basic = Template.bind({});
Basic.args = {
  label: 'Button label',
};

Like that, the "clicked" action is not displayed in the Actions tab.
If I delete the onClick key from the defaultProps object in Button.js the action works.

I also noticed that if I delete the component key from the default export in Button.stories.js (delete the line "component: Button") the action also works but in this case the Controls addon does not work anymore.

[kmckee]

I'm experiencing this issue as well.

I created a repo that reproduces this issue.

Steps taken to create it are:

1. npx create-react-app foo && cd foo
2. npx sb init
3. npm run storybook and confirm that button actions are getting logged.
4. In Button.js, change defaultProp of onClick to empty function.
5. actions are no longer logged.

[luizeboli]

Same problem here, my example is exactly as the one provided by @yannickcornaille

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Sinled]

Any updates on this issue? Have the same problem.

[thebinaryfelix]

This worked for me. I'm using Storybook version 6.0.5

export default {
  component: Button,
  title: 'Button',
 // Add the defaultValue property
  argTypes: { onClick: { defaultValue: null, action: 'clicked' } },
};

const Template = (args) => <Button {...args} />;

export const Basic = Template.bind({});

Reference:
I had the same problem, but I've found a work around based on this test file.

https://github.com/storybookjs/storybook/blob/9b1d2d30f31f54992b1fdd19987bcce47c7c1f71/addons/actions/src/preset/addArgs.test.ts#L61

[lordfpx]

Same bug here, it's quite anoying :-(.

[glrodasz]

@thebinaryfelix answer fix the issue per story, but then if you want to use the general solution in .storybook/preview.js it has the same problem.

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
} 

[deividmarques]

I used it and it worked
```
argTypes: {​​​​​​​​ onOpen: {​​​​​​​​ defaultValue: null, }​​​​​​​​, onChange: {​​​​​​​​ defaultValue: null, }​​​​​​​​, }​​​​​​​​

parameters: {
actions: { argTypesRegex: '^on.*' },
},
````