Default for function prop overrides action argType

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® Core™ 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.

[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

[deividmarques]

I used it and it worked

argTypes: {​​​​​​​​ onOpen: {​​​​​​​​ defaultValue: null, }​​​​​​​​, onChange: {​​​​​​​​ defaultValue: null, }​​​​​​​​, }​​​​​​​​

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