@click (and other Alpine.js shorthand) attributes are removed from components in Storybook

Created on 2 June 2025, 27 days ago

Problem/Motivation

When using Alpine.js in a Drupal site with the Storybook module, the shorthand syntax for event bindings such as @click (which is equivalent to x-on:click) does not work in Storybook.

Although Alpine.js works fine in the actual site, when rendering a component via the Storybook module, the @click attribute is stripped from the markup. This results in broken interactivity for Alpine components inside Storybook.

This is likely due to sanitization or HTML processing (possibly during Twig-to-HTML rendering or internal serialization) that removes non-standard attribute syntax starting with @.

Steps to reproduce

Use Alpine.js in your Drupal theme or module.

Create a Storybook component using the following template:

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <p x-show="open">Visible when open is true</p>
</div>

Render the component via Storybook.

Inspect the output in the browser dev tools.

🐛 Bug report
Status

Active

Version

1.0

Component

Miscellaneous

Created by

🇬🇷Greece dotoree

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024