Link_to and suppression of events

1

Having a few issues adding Stimulus to a link_to tag. This code does not trigger the stimulus event.

<%= link_to 'edit', 'javascript:function();', data: { action: 'click->hidden-form.showForm', target: 'hidden-form.showLink'} %>

This code does, but the link is followed:

<%= link_to 'edit', '#', data: { action: 'click->hidden-form.showForm', target: 'hidden-form.showLink' %>

It works perfectly on a div or any other non-link tag:

<div data-action='click->hidden-form.showForm', data-target='hidden-form.showLink'>edit</div>

The method in the controller:

showForm(e) {
    e.preventDefault();
    console.log('clicked show');
    this.textTarget.classList.add('display-none');
    this.formTarget.classList.remove('display-none');
  }

Why do I want to add to a link tag? to remain consistent with the styling across the rest of the app.

2

It should be: data-action='click->hidden-form#showForm (# instead of .)