Hi, I was hoping that if I add multiple actions:
`data-action="schedulelist#tryedit schedulesummary#edit"`
That returning false or similar would prevent the second action from firing. That doesn’t seem to be the case, so I was wondering how best to achieve this. Basically I have an outer controller with multiple child containers, of which only one can be edited at any one time. So when you click the edit button, I first wanted to call the outer controller to check if this was allowed (that’s the tryedit) and then if so, allow the actual edit method on the child controller to execute.
Thanks for any ideas on this.
Matt.
---
Hey @Matt_Roberts!
Totally doable! One of the great things about Stimulus is it just gets out of the way and lets you use everyday JS to handle tricky problems like these. In this case, you’ll want to dispatch a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) and be sure to set it to be _cancelable_. Then, the outer controller can call [CustomEvent.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) if editing shouldn’t be allowed. The dispatching element then just needs to check the response of the dispatch call - if it’s false, the event was cancelled and editing isn’t allowed.
Here’s a simple example:
**OuterController** (outer\_controller.js)
```auto
import { Controller } from 'stimulus'
export default class extends Controller {
connect() {
// We bind the function to 'this' to ensure scoping is correct within handleBeginEdit
this.beginEditHandler = this.handleBeginEdit.bind(this)
// This needs to set the "useCapture" option to true
this.element.addEventListener('beginEdit', this.beginEditHandler, true)
}
disconnect() {
// Be sure to clean up after ourselves on disconnect!
this.element.removeEventListener('beginEdit', this.beginEditHandler, true)
}
handleBeginEdit(evt) {
console.log(evt)
// We'll control whether edits are allowed via a data property
if(this.data.get("allow") == "false")) {
evt.preventDefault()
}
}
}
```
**InnerController** (inner\_controller.js)
```auto
import { Controller } from 'stimulus'
export default class extends Controller {
tryEdit() {
console.log("Trying to edit...")
// Dispatch the event. Be sure to make it cancelable!
const evt = new CustomEvent('beginEdit', {cancelable: true})
if(this.element.dispatchEvent(evt)) {
console.log("I can edit, let's go!")
}
}
}
```
And the corresponding HTML:
```auto
@welearnednothing Awesome stuff, thanks so much for going abover and beyond there to explain. I was thinking that something involving events could be a possible solution, but you’ve filled in all the blanks with this, so thank you 🙂
---
> [@Matt\_Roberts](#):
>
> That returning false or similar would prevent the second action from firing.
I think what you are looking for is `event.stopImmediatePropagation()`
this will prevent all subsequent actions
> [@Possible to stop calls with multiple actions?](https://discuss.hotwired.dev/t/possible-to-stop-calls-with-multiple-actions/628):
>
> If you’re using multiple actions in an element, is it possible to stop/abort the chain in some way? \ So if verify() failed I’d want to stop submit() from being called at all. Note these are in two different controllers. My particular scenario is that I’ve got a generic controller that is on all “Cancel” buttons in forms throughout my site. But for some forms I have a controller specific to handling fields on that fo…
---
Good call, @adrienpoly! That’s _much_ simpler 🙂 For some reason, I wasn’t thinking of them as two event listeners on the same element, but they totally are.
There are some advantages to using CustomEvents, but in Matt’s case (and in many cases), `stopImmediatePropagation()` is the easiest path. @Matt_Roberts, just be aware that the inner click handler won’t be called at all here when editing isn’t allowed. So if the inner click handler wanted to know that it was cancelled so it could do something differently (change the style, provide messaging), that’s not possible with `stopImmediatePropagation()`.
Thanks @adrienpoly!