interim fix for drop downs, BROKEN FIX, interinm fix

Modules/Company/Resources/views/_form.blade.php

@@ -53,8 +53,9 @@
             id="country_id"
             name="country_id"
             data-wms-select2
+            data-company-country-select2
             data-placeholder="Search and select a country"
-            class="w-full"
+            class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
         >
             <option value=""></option>
             @foreach ($countries as $country)

Modules/Company/Resources/views/index.blade.php

@@ -85,8 +85,9 @@
                             id="quick_country_id"
                             name="country_id"
                             data-wms-select2
+                            data-company-country-select2
                             data-placeholder="Search and select country"
-                            class="w-full"
+                            class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
                         >
                             <option value=""></option>
                             @foreach($countries as $country)

resources/css/app.css

@@ -1529,3 +1529,170 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
         color: rgb(165 243 252);
     }
 }
+
+
+/* WMS professional Select2 fields -------------------------------------------------
+   These rules are intentionally global because company, warehouse, country and
+   helpdesk forms all use the same Select2 control pattern. */
+@layer components {
+    .wms-select2-field select[data-wms-select2],
+    .wms-select2-field select[data-company-country-select2] {
+        margin-top: 0.5rem;
+        height: 3rem;
+        width: 100%;
+        border-radius: 0.75rem;
+        border: 1px solid rgb(212 212 216);
+        background-color: white;
+        padding-left: 1rem;
+        padding-right: 2.5rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: rgb(24 24 27);
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+    }
+
+    .dark .wms-select2-field select[data-wms-select2],
+    .dark .wms-select2-field select[data-company-country-select2] {
+        border-color: rgb(63 63 70);
+        background-color: rgb(9 9 11);
+        color: white;
+    }
+
+    .wms-select2-field .select2-container {
+        margin-top: 0.5rem;
+        width: 100% !important;
+        display: block;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single,
+    .select2-container--default.wms-select2-dropdown-owner .select2-selection--single {
+        height: 3rem;
+        min-height: 3rem;
+        border-radius: 0.75rem;
+        border: 1px solid rgb(212 212 216);
+        background: white;
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+        outline: none;
+        transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
+        height: 3rem;
+        padding-left: 1rem;
+        padding-right: 3rem;
+        color: rgb(24 24 27);
+        font-size: 0.875rem;
+        font-weight: 600;
+        line-height: 3rem;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
+        color: rgb(113 113 122);
+        font-weight: 500;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear {
+        height: 3rem;
+        margin-right: 2rem;
+        color: rgb(113 113 122);
+        font-size: 1.1rem;
+        line-height: 3rem;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
+        top: 0;
+        right: 0.75rem;
+        height: 3rem;
+        width: 1.75rem;
+    }
+
+    .wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single,
+    .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single {
+        border-color: rgb(37 99 235);
+        box-shadow: 0 0 0 3px rgb(37 99 235 / 0.22);
+    }
+
+    .select2-container--open {
+        z-index: 99999;
+    }
+
+    .select2-container--default .select2-dropdown {
+        overflow: hidden;
+        border: 1px solid rgb(63 63 70);
+        border-radius: 0.875rem;
+        background: white;
+        box-shadow: 0 24px 60px rgb(15 23 42 / 0.26);
+    }
+
+    .select2-container--default .select2-search--dropdown {
+        padding: 0.75rem;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field {
+        min-height: 2.75rem;
+        border-radius: 0.75rem;
+        border: 1px solid rgb(212 212 216);
+        background: white;
+        padding: 0 0.875rem;
+        color: rgb(24 24 27);
+        font-size: 0.875rem;
+        outline: none;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field:focus {
+        border-color: rgb(37 99 235);
+        box-shadow: 0 0 0 3px rgb(37 99 235 / 0.22);
+    }
+
+    .select2-container--default .select2-results__option {
+        padding: 0.75rem 1rem;
+        color: rgb(24 24 27);
+        font-size: 0.875rem;
+        font-weight: 600;
+    }
+
+    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
+        background: rgb(37 99 235);
+        color: white;
+    }
+
+    .select2-container--default .select2-results__option--selected {
+        background: rgb(239 246 255);
+        color: rgb(30 64 175);
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single {
+        border-color: rgb(63 63 70);
+        background: rgb(9 9 11);
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
+        color: white;
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder,
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear {
+        color: rgb(161 161 170);
+    }
+
+    .dark .select2-container--default .select2-dropdown {
+        border-color: rgb(63 63 70);
+        background: rgb(24 24 27);
+        color: white;
+    }
+
+    .dark .select2-container--default .select2-search--dropdown .select2-search__field {
+        border-color: rgb(63 63 70);
+        background: rgb(9 9 11);
+        color: white;
+    }
+
+    .dark .select2-container--default .select2-results__option {
+        color: rgb(244 244 245);
+    }
+
+    .dark .select2-container--default .select2-results__option--selected {
+        background: rgb(30 58 138 / 0.55);
+        color: rgb(191 219 254);
+    }
+}

resources/js/app.js

@@ -3,12 +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 = $;
 
-import 'select2';
+select2(window, $);
-import 'select2/dist/css/select2.min.css';
 
 const chartColours = [
     'rgb(8, 145, 178)',
@@ -167,32 +168,47 @@ function initialiseSelect2() {
         return;
     }
 
-    $('[data-helpdesk-select2], [data-wms-select2]').each(function () {
+    $('[data-helpdesk-select2], [data-wms-select2], [data-company-country-select2]').each(function () {
-        const $select = $(this);
+        const select = this;
+        const $select = $(select);
 
         if ($select.hasClass('select2-hidden-accessible')) {
-            $select.select2('destroy');
+            return;
         }
 
         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({
             width: '100%',
             allowClear: !isMultiple,
             closeOnSelect: !isMultiple,
-            dropdownAutoWidth: true,
+            dropdownAutoWidth: false,
-            placeholder:
+            placeholder,
-                $select.data('placeholder') ||
+            dropdownParent: $('body'),
-                $select.find('option[value=""]').first().text() ||
+            sorter: function (data) {
-                (isMultiple ? 'Select options' : 'Select option'),
+                return data.sort(function (a, b) {
+                    return (a.text || '').localeCompare(b.text || '', undefined, {
+                        sensitivity: 'base',
+                        numeric: true,
+                    });
+                });
+            },
         });
 
-        $select.off('change.select2-livewire');
+        $select.off('change.wms-select2-livewire');
 
-        $select.on('change.select2-livewire', function () {
+        $select.on('change.wms-select2-livewire', function () {
-            setLivewireProperty(this, this.dataset.wireModel, $select.val());
+            setLivewireProperty(select, select.dataset.wireModel, $select.val());
 
-            this.dispatchEvent(
+            select.dispatchEvent(
                 new Event('change', {
                     bubbles: true,
                 })