4

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.

Ashutosh Shinde
  • 97
  • 1
  • 6
  • 1
    I am getting the same behavior. Function works fine, but when i add it as an action to my default args, the event is logged in actions but the actual function is not called. here is how I define my action: export default { title: 'UI Elements /Views/Event/Create', ..., argTypes: { submit: { action: 'submitted' } }, } as Meta; – J King Dec 13 '22 at 21:59
  • so it turns out that storybook actions will only display a "payload" if the payload is passed into the function as parameters. – J King Dec 13 '22 at 22:32
  • I have found that the problem is due to the latest release of storybook and angular not working together. I have found a work around also for it. I'll link it here. 'https://github.com/storybookjs/storybook/issues/18578' 'https://github.com/storybookjs/storybook/issues/17004' – Ashutosh Shinde Dec 14 '22 at 07:08
  • thats odd, I have a new angular 15 app running with story book with no errors. I created it using the nx monorepo tools. you could spin up a default project with their tool to compare to your own. – J King Dec 18 '22 at 16:07

2 Answers2

1

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.

James
  • 91
  • 5
0

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.

user1736217
  • 425
  • 1
  • 4
  • 7