Cancel navigation when user presses ESC

[fregante]

Regular navigation in the browser can be stopped by clicking the browser’s "Stop loading" button or by hitting the ESC key. Turbo does not handle this and requests cannot be cancelled after fetch is made.

I looked into the code and I have not found a way to implement this myself outside Turbo:

• cancellation is only possible before the fetch
• request.cancel is present but not accessible from the event

I wish Turbo would either:

• expose event.detail.cancel() on one of the early events, like click (since history events cannot be cancelled) so that it can be called at any time before render, or
• automatically register an ESC listener

Prior art

• https://github.com/refined-github/refined-github/issues/2118

[dhh]

I like the idea of matching the browser here. Making in-flight requests cancelable with esc. Please do explore.

[fregante]

I'd love to see this eventually in Turbo. I tried looking into it and there doesn't seem to be any way to cancel these events completely.

Turbo allows "cancellation" of turbo:click and turbo:before-render but both of them cause Turbo to set location.href and trigger a full-page reload. "Cancellation" refers to the AJAX loading, not just to the loading.