返回页面后，flatPickr 中的日历消失了

Question

I'm working on a Rails 5 project and using the flatPickr gem to make a calendar. The Calendar works fine and allows me to do searches on a date with no issue. I thought everything was good. However, I noticed that when I left my home page, where I use flatPickr and come back to it the calendar is no longer appearing. I've inspected the page and can even see that the flatPickr CSS class is no longer on the form. It's like the app just forgot about flatPicker. Here's my code:

application.js:

//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap
//= require_tree .
//= require flatpickr


document.addEventListener('DOMContentLoaded', function() {
  flatpickr('#datePicker', {
    enableTime: false,
    dateFormat: "Y-m-d",});
})

document.addEventListener('DOMContentLoaded', function() {
  flatpickr('#datePicker2');
})

home.html.erb:

  <%= form_with(url: "/report", method: "get", remote: true) do |f| %>

      <%= f.label(:first_date, "First Date:") %>
      <%= f.text_field(:first_date, id: 'datePicker')  %>

      <%= f.label(:last_date, "Last Date:") %>
      <%= f.text_field(:last_date, id: 'datePicker2')  %>

      
      <br>
      <p>Enter Report Type:</p>
      <%= select_tag :reportType,
        options_for_select([['po', 'po'], ['invoice', 'invoice'], ['sale', 'sale'], ['received', 'received']]) %>
      <br>

      <%= submit_tag("Show Report") %>

  <% end %>

I'm not sure but wonder if my issue is related to using DOMContentLoaded. Like I said, works fine when I initially land/refresh home page. Once I leave the home page and come back it does not work. Thank you for any help.

Update: I tried using the datePicker gem in rails and get the same exact issue. I've also modified my jquery calls to be the following:

$(document).ready(function(){
  $("#datePicker").focus(function(){
    flatpickr('#datePicker');
  });
});

window.addEventListener("pageshow", function() {
  flatpickr('#datePicker2');
})

and still get the same issue - when I move away from a page the calendar stops appearing.

Answer 1

I was able to answer my issue and the solution was this:

window.addEventListener("turbolinks:load", function() {
  flatpickr('#datePicker2');
})

It was adding that turbolinks:load that helped.