Stimulus: Stop event chain in the middle of multiple actions

Stimulus supports multiple actions on a single element. For example, you can have a link like this:

<a href="#" data-action="session#requireLogin comment#toggleCommentForm">Comment</a>

When the link is clicked, it'll go through session_controller.js first to check whether the user is logged in, and if so, continue to comment_controller to show comment form.
But if the user is not logged in, we want to stop the event chain and show a login modal.

The key is event.stopImmediatePropagation(), available since Stimulus v1.1.

...[Stimulus] respect the ordering of action descriptors in data-action attributes, guaranteeing that actions are invoked from left to right, and that an action on the left can stop an event to prevent invocation of actions on the right.
https://github.com/stimulusjs/stimulus/pull/149

Sharing our session_controller to give you a full picture:

import { Controller } from "stimulus"

export default class extends Controller {
  requireLogin(event) {
    if (App.currentUser) return

    event.stopImmediatePropagation()
    event.preventDefault()

    this.loadLoginModal()
  }
}

That's it ️ !

References:

• A Pull Request to Stimulus to document this behavior
• stopImmediatePropagation API doc
• Discourse thread asking the question

I really like Stimulus - the light weight JavaScript framework and its modest / humble ambitions. It's simple; you can learn in 15 minutes. It's powerful; providing right amount of structures and conventions. I'm satisfied with my one-year experience with it. It's a great extraction.

I haven't written any tips for yet, mainly because I think it's so straightforward, the official Handbook and References have already covered everything. This post is more of an elaboration of an interesting use case I bumped into lately.