JS Performance: Unload Select2 on navigation

Similar to the ACE editor, we unload Select2 to prevent memory leaks and duplicated selectors when navigating to a cached site.

Author: MrSerth

app/assets/javascripts/labels.coffee.erb

@@ -94,12 +94,19 @@ ready = ->
       I18n.t('labels.javascripts.max_limit_reached', {limit: limit})
 
     $('.labels-select2-tag').on 'select2:select', clear_input
+  $(document).one('turbo:visit', destroy_select2);
   return
 
 clear_input = ->
   $('.labels-select2-tag').siblings(".select2").find("textarea").val("");
   return
 
+destroy_select2 = ->
+  selectElement = $('.labels-select2-tag');
+  selectElement.select2('destroy');
+  selectElement.off('select2:select');
+  return
+
 
 root = exports ? this;
 root.verify_label_name = verify_label_name;

app/assets/javascripts/tasks_form.coffee

@@ -16,6 +16,8 @@ initializeLoadSelect2 = ->
     closeOnSelect: false
     placeholder: I18n.t('tasks.javascripts.select_groups')
 
+  $(document).one('turbo:visit', destroy_select2);
+
 initializeFileTypeSelection = ->
   $('body').on 'keyup', '.file-name', (event) ->
     editor = $(this).parents('.file-container').find('.editor')[0]
@@ -30,6 +32,10 @@ initializeVisibilityWarning = ->
   $('#task_access_level_public').on 'change', ->
     warning_message.addClass('d-none')
 
+destroy_select2 = ->
+  $('#task_programming_language_id').select2('destroy');
+  $('.my-group').select2('destroy');
+  return
 
 $(document).on('turbo-migration:load', ready)
 $(document).on('select2:locales:loaded', initializeLoadSelect2)

app/assets/javascripts/tasks_index.coffee

@@ -24,6 +24,8 @@ initializeSelect2 = ->
     closeOnSelect: false
     placeholder: I18n.t('tasks.javascripts.all_languages')
 
+  $(document).one('turbo:visit', destroy_select2);
+
 toggleHideShowMore = (element) ->
   $parent = $(element).parent()
   $toggle = $(element).find '.more-btn'
@@ -137,6 +139,11 @@ initializeInputFieldEnterCallback = ->
     $('.search-submit-button-tag').click();
     event.preventDefault();
 
+destroy_select2 = ->
+  $('.defaultSelect2').select2('destroy');
+  $('.language-box').select2('destroy');
+  return
+
 
 $(document).on('turbo-migration:load', ready)
 $(window).on('resize', -> initCollapsable($('.description'), '95px'))