document.addEventListener('DOMContentLoaded', function() {
  // Inititate Select2 on any select element with the class .select2
  $('select.select2').select2({
    // change that
    allowClear: false,
    placeholder: {
      id: '-1', // the value of the option
      text: 'Select an option'
    }
  })

  // BELOW: z-index fix for Select2 v3.x to lower the z-index of an opened Select2.
  // The javascript below is not needed if Spree is updated to use Select2 v4.x
  window.addEventListener('click', function(e) {
    var select2Drop = document.getElementById('select2-drop')

    if (select2Drop) {
      if (select2Drop.contains(e.target)) {
        // Clicking inside the Select2 dropdown does nothing...
      } else {
        // Clicking outside the Select2 dropdown close all open Select2 dropdowns.
        $('*').select2('close')
      }
    }
  })
})

$.fn.addSelect2Options = function (data) {
  var select = this

  function appendOption(select, data) {
    var option = new Option(data.name, data.id, true, true)
    select.append(option).trigger('change')
  }

  if (Array.isArray(data)) {
    data.map(function(row) {
      appendOption(select, row)
    })
  } else {
    appendOption(select, data)
  }
  select.trigger({
    type: 'select2:select',
    params: {
      data: data
    }
  })
}

$.fn.select2.defaults.set('theme', 'bootstrap4')

document.addEventListener('DOMContentLoaded', function() {
  // Inititate Select2 on any select element with the class .select2
  $('select.select2').select2({
    // change that
    allowClear: false,
    placeholder: {
      id: '-1', // the value of the option
      text: 'Select an option'
    }
  })
})

$.fn.addSelect2Options = function (data) {
  var select = this

  function appendOption(select, data) {
    var option = new Option(data.name, data.id, true, true)
    select.append(option).trigger('change')
  }

  if (Array.isArray(data)) {
    data.map(function(row) {
      appendOption(select, row)
    })
  } else {
    appendOption(select, data)
  }
  select.trigger({
    type: 'select2:select',
    params: {
      data: data
    }
  })
}

$.fn.select2.defaults.set("width", "style")
$.fn.select2.defaults.set("dropdownAutoWidth", false)
$.fn.select2.defaults.set('theme', 'bootstrap4')

Fix width issue. Remove JS that was for <v4
Fix width issue. Remove JS that was for <v4
