Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canceling `turbo:click` does not stop a frame navigation.

See original GitHub issue

Looking at the turbo:click docs:

Cancel this event to let the click fall through to the browser as normal navigation.

Though if your link triggers a frame navigation, running preventDefault() doesn’t cancel it.

document.addEventListener('turbo:click', (e) => e.preventDefault()) on a Visit:

https://user-images.githubusercontent.com/11280312/175405211-c6b112ea-1fd7-4afe-93b8-04cde5e910fa.mov

document.addEventListener('turbo:click', (e) => e.preventDefault()) on a frame:

https://user-images.githubusercontent.com/11280312/175405308-19dcfbe7-de8f-4d88-8d08-72d3af4b943c.mov

Issue Analytics

State:
Created a year ago
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

seanpdoylecommented, Nov 4, 2022

One question though, why do we always prevent turbo:click for frames?

That is a decision that pre-dates my involvement in the project: https://github.com/hotwired/turbo/blame/v7.0.0-beta.1/src/core/frames/link_interceptor.ts#L39-L40

I’m in favor of experimenting with a different implementation, and support some trial and error with the hopes that the test suite will guide us!

0reactions

manuelpuyolcommented, Nov 4, 2022

I’m not sure it’s possible to cancel frames only looking at turbo:click with the current architecture 🤔 What was the reason #412 was reverted?

As a possible workaround, we can do something like https://github.com/hotwired/turbo/pull/788, which adds a new turbo:frame-click event that controls frame clicks and can be canceled 🤷

Top Results From Across the Web

Navigate with Turbo Drive - Hotwire Turbo

Restoration visits cannot be canceled and do not fire turbo:before-visit . Turbo Drive issues restoration visits in response to history navigation that has ......

can only interact with a turbo frame once? #249 - GitHub

I click edit, update, click save, and the change is reflected. However if I try to do this another time on the same...

Turbo Frames and Turbo Stream templates - Hotrails

Rule 2: When clicking on a link within a Turbo Frame, if there is no Turbo Frame with the same id on the...

Adding Interactivity with Turbo Frames - Medium

Turbo Frames capture navigation. Within a Turbo Frame, any link clicks or form submissions will, by default, capture the server response, ...

Turbo-frame with Devise, after a successful update user, on ...

By making your edit action responding with a turbo_stream you will be assured that it gets replaced accordingly. Share.