interim fix for drop downs, BROKEN FIX, interinm fix

resources/js/app.js

@@ -3,13 +3,13 @@ require('flatpickr');
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import Chart from 'chart.js/auto';
 import $ from 'jquery';
-import select2 from 'select2/dist/js/select2.full.js';
-import 'select2/dist/css/select2.min.css';
 
 window.$ = $;
 window.jQuery = $;
 
-select2(window, $);
+import 'select2';
+import 'select2/dist/css/select2.min.css';
+import '../css/wms-select2.css';
 
 const chartColours = [
     'rgb(8, 145, 178)',
@@ -168,47 +168,39 @@ function initialiseSelect2() {
         return;
     }
 
-    $('[data-helpdesk-select2], [data-wms-select2], [data-company-country-select2]').each(function () {
-        const select = this;
-        const $select = $(select);
+    $('[data-helpdesk-select2], [data-wms-select2]').each(function () {
+        const $select = $(this);
 
         if ($select.hasClass('select2-hidden-accessible')) {
-            return;
+            $select.select2('destroy');
         }
 
         const isMultiple = $select.prop('multiple');
-        const placeholder =
-            $select.data('placeholder') ||
-            $select.find('option[value=""]').first().text() ||
-            (isMultiple ? 'Select options' : 'Select option');
-
-        if (!isMultiple && !$select.find('option[value=""]').length) {
-            $select.prepend(new Option('', '', false, false));
-        }
 
         $select.select2({
+            theme: 'wms',
             width: '100%',
             allowClear: !isMultiple,
             closeOnSelect: !isMultiple,
             dropdownAutoWidth: false,
-            placeholder,
-            dropdownParent: $('body'),
-            sorter: function (data) {
-                return data.sort(function (a, b) {
-                    return (a.text || '').localeCompare(b.text || '', undefined, {
-                        sensitivity: 'base',
-                        numeric: true,
-                    });
-                });
+            placeholder:
+                $select.data('placeholder') ||
+                $select.find('option[value=""]').first().text() ||
+                (isMultiple ? 'Select options' : 'Select option'),
+            sorter(data) {
+                return data.sort((first, second) => first.text.localeCompare(second.text, undefined, {
+                    sensitivity: 'base',
+                    ignorePunctuation: true,
+                }));
             },
         });
 
-        $select.off('change.wms-select2-livewire');
+        $select.off('change.select2-livewire');
 
-        $select.on('change.wms-select2-livewire', function () {
-            setLivewireProperty(select, select.dataset.wireModel, $select.val());
+        $select.on('change.select2-livewire', function () {
+            setLivewireProperty(this, this.dataset.wireModel, $select.val());
 
-            select.dispatchEvent(
+            this.dispatchEvent(
                 new Event('change', {
                     bubbles: true,
                 })