Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InstantClick is incompatible with data-turbo-stream and data-turbo-confirm #1174

Closed
Slotos opened this issue Feb 8, 2024 · 1 comment · Fixed by #1178
Closed

InstantClick is incompatible with data-turbo-stream and data-turbo-confirm #1174

Slotos opened this issue Feb 8, 2024 · 1 comment · Fixed by #1178

Comments

@Slotos
Copy link

Slotos commented Feb 8, 2024

Reproduction is available here

When prefetching data-turbo-stream="true" links, Instantclick evaluates turbo-stream tags immediately, effectively turning hover event into a click one.

When hovering over data-turbo-confirm links, the request is being made immediately, bypassing the confirmation requirement.

My use case

I'm using data-turbo-stream="true" to open selected forms in modal <dialog>. The page needs to open a dialog when link is engaged directly, but render a separate usable form page when link is pasted or is otherwise taken out of the page lifecycle (e.g. middle click). The problem boiled down to either discerning turbo-frame as html variant, which seems to be justifiably discouraged, or introducing modals as a streamed enhancement. I chose the latter.

General argument

With data-turbo-stream and data-turbo-confirm being official parts of the framework, InstantClick should be aware and compatible.

"GET" requests are idempotent on server side, but responses to those requests have effect on browser state. Regular navigation takes care of replays by effectively cleaning the slate, but in case of Turbo Drive, we're skipping that phase, which allows for effects to accumulate.

Both data-turbo-stream and data-turbo-confirm imply that important or at least noticeable client-side effects are probable, and as such InstantClick should either be disabled by default for such links, or contain prefetched data without triggering its effects (stream processing, connecting stimulus controllers, etc.) until it is actually requested by the user.


This is similar to #1170 but contains a reproduction code, an additional issue, and an attempt to provide minimal reasonable expectations with justification.

@brentkirby
Copy link

Ran into this problem today when upgrading turbo/turbo-rails. For anyone else coming across this issue, the temporary solution is to add data-turbo-prefetch="false" to any link that triggers a turbo stream. Disabling prefetch causes streams and confirmations to work as they previously did.

This issue only seems to impact links which would trigger a GET request. If data-turbo-method is set to any other method, they work as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging a pull request may close this issue.

2 participants