Storybook not calling angular component functions on event

Question

I'm using Storybook to display a angular component. The angular component has a function that is called on click. But storybook doesn't call this function. It just logs an event in the actions tab and leaves it at that.

sample.component.ts

onClickFunc(): void {
    console.log('clicked');
    // do some other stuff
}

sample.component.html

<div (click)="onClickFunc()">
    Some content
</div>

When I click on the div it just logs this in the actions tab but doesn't actually call the function so there is no console.log or other code running.

Now the funny part is if I leave the storybook server running and change the name of the function in both the ts file and html file is starts working. There is not logging in actions tab and the console.log() works. But when I stop the server and start it again we are back to the same problem.

Answer 1

Storybook has a regex working on identifying events. It assumes the naming convention onSomething is only used for events that it will capture and display as action.

It is a good practice to not name a function that handles an event like an event, if you rename your function to clicked() it will work within storybook.

Answer 2

There seems to be some conflict with Storybook's actions feature. I had the same issue and found if I either comment out:

import { setCompodocJson } from "@storybook/addon-docs/angular";

import docJson from "../documentation.json";
setCompodocJson(docJson);

import "!style-loader!css-loader!sass-loader!./fonts.css";

export const parameters = {
  // actions: { argTypesRegex: "^on[A-Z].*" }, <-- This line here
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: { inlineStories: true },
};

or rename my hanlders/component methods to not start with "on" (something that fails the regex ^on[A-Z].*) it will work.