Code Monkey home page Code Monkey logo

rails-turbo-refresh-click-hijack's Introduction

Rails Turbo 8 refresh brodcast overriding manual visits issue

This is a stock Rails 7.1.3.2 app to demonstrate a race condition with Turbo 8 refreshes and regular user clicks through the application. It's rather easy to observe when there is a consistent stream of refreshes generated and user navigates through the pages steadily.

Replicate the issue

Redis server is required to be running on localhost for Action Cable.

git clone [email protected]:klevo/rails-turbo-refresh-click-hijack.git
cd rails-turbo-refresh-click-hijack

# bundle install and database init (seed data included)
bin/setup

# Terminal tab 1: launch the rails app
bin/rails s

# Terminal tab 2: generates updates to items in the DB
bin/rake broadcast:start

Visit http://localhost:3000 in your the browser and open JavaScript console. All turbo visists are logged into the console.

With the above rake task running, the Items in the database are all touched every second, generating turbo refreshes.

Click back and forth between item details and item index. Observe that every few click (sometimes up to 20), your navigation will be overriden by a turbo refresh coming for the page that you're on, that arrived right after your click. Meaning instead of navigating to a new location, you stay on the current page.

Video of the issue

turbo-refresh-overriding-user-visit.mov
  • At the end you can observe I click on "Show this item" of the item named "Two", yet I remain on the index page. You can notice the desired page blinked in and out for a few microseconds too.
  • The cause is visible in the console: The second to last turbo visit to /items/2 is my user initiated action.
  • The following (last) entry in the console is the turbo refresh of the current /items page that just arrived (you can see the Updated at times changed from from :05 to :06). This refresh essentially hijacked my click and resulted in me staying on the index page.

Project initialized by

rails new --asset-pipeline=propshaft --database=sqlite3 --css=tailwind rails-turbo-refresh-click-hijack

cd rails-turbo-refresh-click-hijack

rails g scaffold Item name:string

rails-turbo-refresh-click-hijack's People

Contributors

klevo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.