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.

Sign up for GitHub

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

Jump to bottom

Turbo.session.drive ignored in Turbo Frames v7.2.x #826

Closed
pilaf opened this issue Dec 21, 2022 · 0 comments
Closed

Turbo.session.drive ignored in Turbo Frames v7.2.x #826

pilaf opened this issue Dec 21, 2022 · 0 comments

Comments

@pilaf
Copy link

pilaf commented Dec 21, 2022 •
edited

Up to Turbo v7.1.0, when setting Turbo.session.drive = false, links within a <turbo-frame> would not be hijacked and instead allow the default browser behavior of a full page navigation to happen.

In Turbo v7.2.2 and above this behavior changed. Now Turbo.session.drive is ignored within <turbo-frame> elements and links always get hijacked regardless of the value of that setting.

I couldn't find anything in the changelog about this change in behavior, and my expectation is that disabling Turbo.session.drive should make link-hijacking opt-in only, regardless of whether those links are in or outside a Turbo Frame.

This is also important for my use case, as I maintain a project that uses Turbo Frames to load content, but doesn't use Turbo Drive for the most part. This change in behavior means if I upgrade to Turbo 7.2.x I'd have to remember to set target="_top" on every Turbo Frame in the project, instead of disabling Drive by default and opting in only when needed.

Here's a test demonstrating the issue:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Turbo Drive test</title>

    <script type="module">
      // Test loader
      document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('test-select').addEventListener('change', (e) => {
          document.head.append(
            document.getElementById(e.currentTarget.value).content.querySelector('script').cloneNode(true)
          )

          document.getElementById('test-setup').style.display = null

          e.currentTarget.setAttribute('disabled', true)
        });
      });
    </script>

    <style>
      :root { font-family: sans-serif }

      turbo-frame {
        display: block;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <select id="test-select">
      <option value="">-- Select a test --</option>
      <option value="test-1">Turbo 7.1.0; Drive enabled</option>
      <option value="test-2">Turbo 7.1.0; Drive disabled</option>
      <option value="test-3">Turbo 7.2.4; Drive enabled</option>
      <option value="test-4">Turbo 7.2.4; Drive disabled</option>
    </select>

    <main id="test-setup" style="display: none">
      <p>Outside <tt>turbo-frame</tt>&mdash;this should only remain here after clicking below link when <tt>Turbo.session.drive</tt> is enabled</p>

      <p><tt>Turbo.session.drive</tt> is <span id="turbo-drive-value"></span></p>

      <turbo-frame id="frame">
        <p>Inside <tt>turbo-frame</tt></p>
        <p><a href="/payload.html" data-turbo-target="_self">click me</a></p>
      </turbo-frame>
    </main>

    <template id="test-1">
      <script type="module">
        import * as Turbo from "https://cdn.skypack.dev/@hotwired/turbo@7.1.0"
        Turbo.session.drive = true
        document.getElementById('turbo-drive-value').innerHTML = 'enabled'
      </script>
    </template>

    <template id="test-2">
      <script type="module">
        import * as Turbo from "https://cdn.skypack.dev/@hotwired/turbo@7.1.0"
        Turbo.session.drive = false
        document.getElementById('turbo-drive-value').innerHTML = 'disabled'
      </script>
    </template>

    <template id="test-3">
      <script type="module">
        import * as Turbo from "https://cdn.skypack.dev/@hotwired/turbo@7.2.4"
        Turbo.session.drive = true
        document.getElementById('turbo-drive-value').innerHTML = 'enabled'
      </script>
    </template>

    <template id="test-4">
      <script type="module">
        import * as Turbo from "https://cdn.skypack.dev/@hotwired/turbo@7.2.4"
        Turbo.session.drive = false
        document.getElementById('turbo-drive-value').innerHTML = 'disabled'
      </script>
    </template>
  </body>
</html>
<!-- payload.html -->
<turbo-frame id="frame">Payload loaded</turbo-frame>

To run the test:

  1. Save both HTML files (index.html and payload.html)
  2. Run a local static HTTP server, e.g. 
    $ ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd).start'
  3. Open http://localhost:8000/index.html
  4. Select a Turbo version and Turbo.session.drive value from the dropdown
  5. Click the link

Expected behavior: when Drive is disabled clicking the link should cause a full page navigation.

Result: Turbo 7.1.0 complies with expected behavior; Turbo 7.2.4 ignores the disabled Drive setting.
@pilaf pilaf changed the title Disabled Turbo.session.drive ignored in turbo frames v7.2.x Disabled Turbo.session.drive ignored in Turbo Frames v7.2.x Dec 21, 2022
@pilaf pilaf changed the title Disabled Turbo.session.drive ignored in Turbo Frames v7.2.x Turbo.session.drive ignored in Turbo Frames v7.2.x Dec 21, 2022
@pilaf pilaf mentioned this issue May 2, 2023
Closed
@pilaf pilaf closed this as completed May 2, 2023
nofxboy1234 added a commit to nofxboy1234/quote-editor that referenced this issue Oct 9, 2023
@nofxboy1234
Disable Turbo on new, edit, create, update and destroy links/forms(bu…
b01314f 
…ttons) using data-turbo=false on them individually. Turbo.session.drive = false; in app/javascript/appication.js seemed to not disable Turbo on links/buttons(forms) inside a Turbo Frame (hotwired/turbo#826)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@pilaf