Fix turbo select 2 & calendars (#74)

* Fixed Select2 when using back button with Turbo

* Fixed flatpickr when using back button with Turbo

app/assets/javascripts/spree/backend/global/flatpickr.es6

@@ -21,3 +21,9 @@ document.addEventListener("spree:load", function() {
   flatpickr('.datepicker', {})
 })
 
+document.addEventListener("turbo:before-cache", function() {
+  document.querySelectorAll('.datePickerFrom, .datePickerTo, .datepicker').forEach(function(element) {
+    element._flatpickr.destroy()
+  })
+})
+

app/assets/javascripts/spree/backend/global/select2_autocomplete.es6

@@ -25,6 +25,13 @@ document.addEventListener("spree:load", function() {
   loadAutoCompleteParams()
 })
 
+// we need to delete select2 instances before document is saved to cache
+// https://stackoverflow.com/questions/36497723/select2-with-ajax-gets-initialized-several-times-with-rails-turbolinks-events
+document.addEventListener("turbo:before-cache", function() {
+  const select2Autocompletes = document.querySelectorAll('select[data-autocomplete-url-value]')
+  select2Autocompletes.forEach(element => $(element).select2('destroy'))
+})
+
 // eslint-disable-next-line no-unused-vars
 function loadAutoCompleteParams() {
   const select2Autocompletes = document.querySelectorAll('select[data-autocomplete-url-value]')

app/assets/javascripts/spree/backend/spree-select2.js

@@ -1,3 +1,10 @@
+// we need to delete select2 instances before document is saved to cache
+// https://stackoverflow.com/questions/36497723/select2-with-ajax-gets-initialized-several-times-with-rails-turbolinks-events
+document.addEventListener("turbo:before-cache", function() {
+  $('select.select2').select2('destroy')
+  $('select.select2-clear').select2('destroy')
+})
+
 document.addEventListener("spree:load", function() {
   // Initiate a standard Select2 on any select element with the class .select2
   // Remember to add a place holder in the HTML as needed.

app/views/spree/admin/products/_form.html.erb

@@ -231,7 +231,6 @@
       <%= f.select :option_type_ids, options_from_collection_for_select(@product.option_types, :id, :name, @product.option_type_ids),
                                       { include_hidden: true },
                                         multiple: true,
-                                        class: 'select2-hidden-accessible',
                                         data: { autocomplete_url_value: 'option_types_api_v2',
                                                 autocomplete_return_attr_value: 'name',
                                                 autocomplete_multiple_value: true } %>