https://gorails.com/episodes/webpacker-javascript-in-rails-6

Hi Chris
Thanks for the Episode.

I'm new for Rails 6, and when I followed your lesson I've got the multi dubbing of the flatpickr on going the back page in a browser. Like this: see screenshot
Then I've added to the application.js file:

document.addEventListener("turbolinks:before-cache", () => {
  $("[data-behavior='flatpickr']").each(function(){ 
    this._flatpickr.destroy()
   })
})

Is it the right way to overcome this?
Or have I done some code mistake that cause my problem?

Best regards,
Ted

Hey Ted,

Honestly, I'd just recommend using stimulus-flatpickr as it will do the setup/teardown automatically for you when Stimulus connects. Makes for very simple Turbolinks compatibility.

As for just fixing the flatpickr instance when it renders cache, you're exactly right. That's what you'd want. It will make sure it tears down before Turbolinks caches the HTML and that's exactly what you need.

Stimulus makes it a piece of cake, so I've started moving to creating Stimulus components that do the setup/teardown rather than listening to turbolinks events. It works with Turbolinks, with the additional benefit that it will also setup/teardown whenever you dynamically add HTML to the page from an AJAX request or websocket which is really nice.

Thank you very much for such fast and appropriate response.