A more efficient way to disable instant click with JavaScript?

1

Most of the time instant click / prefetching is useful but I’d like to disable it for all “copy to clipboard” links which is controlled through a single StimulusJS controller.

Instead of adding data-turbo-prefetch="false" to all of the links that copy something to your clipboard, you can add a mouseover->clipboard#disablePrefetch action to all of your links which would do this.sourceTarget.parentNode.setAttribute("data-turbo-prefetch", false) so that prefetching doesn’t happen. However, at this point if you have to go back and modify the links you might as well just add the prefetch false to each link.

That works fine, it’s all good but it involves going back to dozens of different ERB templates and adding that mouseover action or data attribute to all of the links.

I was wondering if this could be handled from the “other” side such as overriding the prefetch related code. Perhaps somewhere that lets you say “let this normal prefetch pass through except for when the link has a clipboard controller added to it”.

Any thoughts?

2

A trick I have used for other attributes (not this one particularly) is to add that attribute during the connect() method. Maybe try something like this in your clipboard controller (or any other that may be similarly impacted):

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

  connect() {
    this.element.setAttribute('data-turbo-prefetch', false);
  }
  ...etc

See if that helps in your case (I haven’t tried it yet).

Walter

1 Like
3

That’s a good idea and it works perfectly.

1 Like