Add original click event to 'turbo:click' details

[manuelpuyol]

Right now, if you preventDefault a turbo:click, it will still fallback to the original click, causing a full-page reload. Sending the original click event will allow users to completely cancel a click if they need/want to.

[seanpdoyle]

As an alternative to dispatching the event with a reference to the original, would explicitly preventing the default if event.defaultPrevented serve the same purpose without expanding the surface area of the CustomEvent.detail?

applicationAllowsFollowingLinkToLocation(link: Element, location: URL, mouseEvent: MouseEvent) {
  const event = this.notifyApplicationAfterClickingLinkToLocation(link, location)

  if (event.defaultPrevented) {
    mouseEvent.preventDefault()
    return false
  } else {
    return true
  }
}

[manuelpuyol]

I don't think they are the same behavior. We don't always want to prevent the browser click when preventing turbo:click

[manuelpuyol]

the use cases would be:

1. I want to prevent Turbo from navigating and let the browser do it -> prevent turbo:click
2. I want to prevent all navigations -> prevent both events

[seanpdoyle]

With that in mind, could we make Frame navigation internally aware of the cancellation?

[manuelpuyol]

from my understanding, this is where we trigger the Frame navigation:

turbo/src/core/frames/link_interceptor.ts

Lines 37 to 43 in 98cdc40

	if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
	if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url)) {
	this.clickEvent.preventDefault()
	event.preventDefault()
	this.delegate.linkClickIntercepted(event.target, event.detail.url)
	}
	}

this is listening to the turbo:click event, so it should be possible for it to know if the event is defaultPrevented. The problem is that the interceptor runs before any addEventListener I add, so the it always evaluates the event first, and it is never prevented.

maybe we could update

turbo/src/core/session.ts

Lines 153 to 159 in 98cdc40

	willFollowLinkToLocation(link: Element, location: URL) {
	return (
	this.elementDriveEnabled(link) &&
	locationIsVisitable(location, this.snapshot.rootLocation) &&
	this.applicationAllowsFollowingLinkToLocation(link, location)
	)
	}

to dispatch another event (if the click isn't prevented) that the LinkInterceptor listens to

[manuelpuyol]

@seanpdoyle would adding another internal event make sense here?

[seanpdoyle]

Is this related to #610?

If it is, could we add a test case that exercises a call to event.preventDefault() preventing a frame navigation?

[manuelpuyol]

Is this related to #610?

If it is, could we add a test case that exercises a call to event.preventDefault() preventing a frame navigation?

No, this is just something I've been thinking about for some time 😅

[manuelpuyol]

@seanpdoyle wdyt of moving forward with only this change and fixing the frame issue in another PR?

[dhh]

Let's get a doc PR going to explain this as well for the 7.2.0 release 👍