Storybook's action() only works when called directly by an event

Question

I'm using Storybook's action() to create an event listener on a component.

This seems to work:

import { action } from '@storybook/addon-actions';

...

<custom-link-component>
  <a 
    href="https://google.com"
    onBlur={action('blur')}
  >
    Google
  </a>
</custom-link-component>

Storybook logs the event in the Actions pane. The code is, however, a little strange, in that action() is invoked, rather than passed, which isn't the way events usually work. That might be relevant in a moment.

This does NOT work, in that the action is not logged in storybook:

import { action } from '@storybook/addon-actions';

...

<custom-link-component>
  <a 
    href="https://google.com"
    onBlur={(e) => {console.log(e); action('blur');}}
  >
    Google
  </a>
</custom-link-component>

The only difference being that action() is invoked inside the anonymous function. console.log() fired correctly, however.

I suspect I'm missing something fundamental here, I'm just not sure what. Why is action('blur') invoked in the first example? Why doesn't the same action('blur') seem to work in the second example?

Answer 1

action('blur') itself returns an event handler, so you need to now pass the event to it:

<a 
  href="https://google.com"
  onBlur={(e) => {
    console.log(e);
    action('blur')(e);
  }}
>
  Google
</a>