🐛 Actions don't work on non-`onClick` functions

Describe the bug Actions don’t work on non-onClick functions when a default value is defined in the component.

To Reproduce Steps to reproduce the behavior:

1. Setup a create-react-app project with sb init
2. Edit the Button (and its prop types) to use onClick2:

export const Button = ({
  onClick2 = Function.prototype,
}) => (
  <button
    onClick={onClick2}
    type="button"
  >
    Hello
  </button>
)

1. Click on the Button in Storybook, actions won’t show.

I first noticed this with onChange and onSubmit; both which had default values.

Expected behavior I expect to see actions logged when I click the button.

Screenshots Working:

Not working:

Code snippets

export const Button = ({
  onClick2 = Function.prototype,
}) => (
  <button
    onClick={onClick2}
    type="button"
  >
    Hello
  </button>
)

System I deleted the clean project I made to for testing, but I’ve seen the issue in my existing project as well:

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 3800X 8-Core Processor
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.90
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.57)
  npmPackages:
    @storybook/addon-actions: ^6.1.21 => 6.1.21
    @storybook/addon-controls: ^6.1.21 => 6.1.21
    @storybook/addon-essentials: ^6.1.21 => 6.1.21
    @storybook/addon-links: ^6.1.21 => 6.1.21
    @storybook/node-logger: ^6.1.21 => 6.1.21
    @storybook/react: ^6.1.21 => 6.1.21

Additional context defaultProps is deprecated (https://github.com/facebook/react/pull/16210).

I don’t want to have to depend on it for default values even though I think it’s superior to defining ECMAScript default values.

[shilman]

What’s happening here is that the actions addon is scanning through the existing argTypes and looking for function argTypes whose names matches the regex. When it fails, it’s because those argTypes don’t exist or because they are not of type function. Perhaps we need to update the design to make it less finicky. Suggestions welcome!!

[shilman]

@Sawtaytoes you’re not binding the onClick2 handler in your story. When I fix that, it works as expected:

export const Button = ({
  primary,
  backgroundColor,
  size,
  label,
  onClick2 = Function.prototype,
  ...props
}) => {
  const mode = primary
    ? "storybook-button--primary"
    : "storybook-button--secondary";
  return (
    <button
      type="button"
      className={["storybook-button", `storybook-button--${size}`, mode].join(
        " "
      )}
      style={backgroundColor && { backgroundColor }}
      {...props}
      onClick={onClick2} // <<-- NEEDED
    >
      {label}
    </button>
  );
};