Error parsing descriptor string "toggleable#click" for element Error: Bad action descriptor "toggleable#click": this.defaultEventNames[element.tagName.toLowerCase(...)] is not a function
I don’t think the error message makes it particularly clear what’s going on here - but it’s related to how Stimulus infers the event you want. Effectively, I’ve been using the shorthand notation for hooking up actions - that is to say if you leave off the event name it will automatically be inferred by the element type.
Taking a look at the ActionDescriptor we can see that the default event types are pretty simple -
click for a link or a button,
change for any input and
submit for any form or submit button.
I ran into my issue because the element I had placed my action on was none of these elements - it was simply a
div. Because of this Stimulus could not infer the event type and threw the error. In order to get this to work I simply needed to be more explicit (or convert by
div to an
a tag instead, though I was not able to do that in this instance for other reasons).
<div data-action="click->toggleable#click"> <amazing-content /> </div>