diff --git a/app/assets/javascripts/spree/backend/global/flatpickr.es6 b/app/assets/javascripts/spree/backend/global/flatpickr.es6 index ebe0b82614..cdf033f063 100644 --- a/app/assets/javascripts/spree/backend/global/flatpickr.es6 +++ b/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() + }) +}) + diff --git a/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6 b/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6 index 5e08e33c3b..925ba9e475 100644 --- a/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6 +++ b/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]') diff --git a/app/assets/javascripts/spree/backend/spree-select2.js b/app/assets/javascripts/spree/backend/spree-select2.js index 19f240f4a5..fb0e67283f 100644 --- a/app/assets/javascripts/spree/backend/spree-select2.js +++ b/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. diff --git a/app/views/spree/admin/products/_form.html.erb b/app/views/spree/admin/products/_form.html.erb index 360d08bee2..e008970316 100644 --- a/app/views/spree/admin/products/_form.html.erb +++ b/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 } %>