How to get storybook to pick up custom events

user_3744304 0
Viewed 373

I have an input web component utilizing ShadowDOM, that internally has a simple structure:

<custom-input id="foobar">
  ::shadow
    <div id="input-root" class="label-north">
      <label for="input">Labeltext</label>
      <input id="input" type="text" />
    </div>
  ::endshadow
</custom-input>

Whenever the native change event occurs, I am replacing this native change event with a custom state-changed event that reports the component state in the event.detail payload. This event has composed: true and bubbles: true.

How do I get this custom event object to show up in the actions section in Storybook?

I have tried like this:

    parameters: {
        actions: {
            handles: ['state-changed'],
        },
    },

But nothing shows up in actions when I change the value of the input.

storybook
1 Answers

I finally found the cause for the issue:

My web component would check if it has an id, as that is a core part of the event.detail payload. If none was present, I stopped emitting the state-change and instead issued a console.warn("Component cannot meaningfully report its state change as no id is present.", this).

As this warning didn't show up in the console (maybe because it's issued in an iframe?), I wasn't aware of the problem.

Once I gave all components an id it did work as described in the question.

user_37443040
Related