Turbolinks to Turbo before-cache behavior differs

[smridge]

Attempting to transition from Turbolinks to Turbo and coming across some differing behavior. I'm not overly familiar with this repo and full intent but curious on the before-cache behavior when switching from Turbolinks to Turbo.

In some cases, before-cache is needed for certain elements to behave as expected when clicking the back button or form submission error redirects.

• With Turbolinks ✅ :

  document.addEventListener("turbolinks:before-cache", function() {
  $(".flatpickr-input").flatpickr('destroy');
  });

• With Turbo:

  document.addEventListener("turbo:before-cache", function() {
  $(".flatpickr-input").flatpickr('destroy');
  });

  • Nothing appears to happen (old behavior of element not being displayed after form re-render). However, clicking the browser back button works as expected.

Update: When going through various events turbo:submit-start did not work either.

document.addEventListener("turbo:submit-start", function() {
  $(".flatpickr-input").flatpickr('destroy');
});

Is there a new approach to solving this? Thoughts from anyone?

[sstephenson]

Would you mind testing with v7.0.0-beta.4 to see if the issue has been fixed?

[smridge]

GET requests are good (as this triggers turbo:before-cache) 👍 . For POST requests, the issue persists. Is there perhaps something different that should be done for POST requests as this does not trigger turbo:before-cache? I tried playing around with turbo:submit-start, turbo:before-fetch-request etc and no success unfortunately.

Context

Form Field before submit:

<input data-behavior="datepicker" type="hidden" name="foo[referral_date]" id="foo_referral_date" class="flatpickr-input">
<input class=" form-control input" placeholder="" tabindex="0" type="text" readonly="readonly">

With Turbolinks ✅ :

<div class="field_with_errors">
  <input data-behavior="datepicker" type="hidden" value="" name="foo[referral_date]" id="foo_referral_date" class="flatpickr-input">
  <input class=" form-control input" placeholder="" tabindex="0" type="text" readonly="readonly">
</div>

With Turbo 😞 :

<div class="field_with_errors">
  <input data-behavior="datepicker" data-controller="flatpicker" type="text" value="" name="foo[referral_date]" id="foo_referral_date">
</div>

[dylanfisher]

I'm having this same issue with Turbo 7.1.0.

In my situation adding <meta name="turbo-cache-control" content="no-cache"> is a good enough workaround and avoids the need to deconstruct any third-party widgets.

This does seem to be counter to what the docs say in the handbook.