interim fix for drop downs, BROKEN FIX, interinm fix

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

@@ -53,9 +53,8 @@
             id="country_id"
             name="country_id"
             data-wms-select2
-            data-company-country-select2
             data-placeholder="Search and select a country"
-            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"
+            class="w-full"
         >
             <option value=""></option>
             @foreach ($countries as $country)

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

@@ -85,9 +85,8 @@
                             id="quick_country_id"
                             name="country_id"
                             data-wms-select2
-                            data-company-country-select2
                             data-placeholder="Search and select country"
-                            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"
+                            class="w-full"
                         >
                             <option value=""></option>
                             @foreach($countries as $country)

resources/css/wms-select2.css

@@ -0,0 +1,157 @@
+/* WMS Select2 professional dark theme.
+   This file is imported after Select2's own CSS so it wins reliably. */
+
+.wms-select2-field .select2-container,
+.select2-container--wms {
+    width: 100% !important;
+    display: block !important;
+}
+
+.wms-select2-field select[data-wms-select2].select2-hidden-accessible {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    padding: 0 !important;
+    margin: -1px !important;
+}
+
+.wms-select2-field .select2-container {
+    margin-top: 0.5rem !important;
+}
+
+.select2-container--wms .select2-selection--single {
+    height: 3rem !important;
+    min-height: 3rem !important;
+    border: 1px solid rgb(63 63 70) !important;
+    border-radius: 0.75rem !important;
+    background: rgb(9 9 11) !important;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.2) !important;
+    display: flex !important;
+    align-items: center !important;
+    outline: none !important;
+    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
+}
+
+.select2-container--wms.select2-container--focus .select2-selection--single,
+.select2-container--wms.select2-container--open .select2-selection--single {
+    border-color: rgb(59 130 246) !important;
+    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.24) !important;
+}
+
+.select2-container--wms .select2-selection--single .select2-selection__rendered {
+    width: 100% !important;
+    padding: 0 3rem 0 1rem !important;
+    color: rgb(244 244 245) !important;
+    font-size: 0.875rem !important;
+    font-weight: 500 !important;
+    line-height: 3rem !important;
+}
+
+.select2-container--wms .select2-selection--single .select2-selection__placeholder {
+    color: rgb(161 161 170) !important;
+    font-weight: 500 !important;
+}
+
+.select2-container--wms .select2-selection--single .select2-selection__arrow {
+    position: absolute !important;
+    top: 0.5rem !important;
+    right: 0.625rem !important;
+    width: 2rem !important;
+    height: 2rem !important;
+    border-radius: 0.625rem !important;
+    background: rgb(39 39 42) !important;
+}
+
+.select2-container--wms .select2-selection--single .select2-selection__arrow b {
+    border-color: rgb(212 212 216) transparent transparent transparent !important;
+    border-width: 5px 4px 0 4px !important;
+    margin-left: -4px !important;
+    margin-top: -2px !important;
+}
+
+.select2-container--wms.select2-container--open .select2-selection--single .select2-selection__arrow b {
+    border-color: transparent transparent rgb(212 212 216) transparent !important;
+    border-width: 0 4px 5px 4px !important;
+}
+
+.select2-container--wms .select2-selection--single .select2-selection__clear {
+    position: absolute !important;
+    right: 2.85rem !important;
+    top: 0.5rem !important;
+    width: 2rem !important;
+    height: 2rem !important;
+    border-radius: 0.625rem !important;
+    color: rgb(161 161 170) !important;
+    font-size: 1.25rem !important;
+    line-height: 1.85rem !important;
+    text-align: center !important;
+}
+
+.select2-container--wms .select2-selection--single .select2-selection__clear:hover {
+    background: rgb(39 39 42) !important;
+    color: rgb(244 244 245) !important;
+}
+
+.select2-container--wms .select2-dropdown {
+    overflow: hidden !important;
+    border: 1px solid rgb(63 63 70) !important;
+    border-radius: 0.875rem !important;
+    background: rgb(24 24 27) !important;
+    color: rgb(244 244 245) !important;
+    box-shadow: 0 24px 60px rgb(0 0 0 / 0.45) !important;
+}
+
+.select2-container--wms .select2-search--dropdown {
+    padding: 0.75rem !important;
+    background: rgb(24 24 27) !important;
+}
+
+.select2-container--wms .select2-search--dropdown .select2-search__field {
+    height: 2.75rem !important;
+    border: 1px solid rgb(63 63 70) !important;
+    border-radius: 0.75rem !important;
+    background: rgb(9 9 11) !important;
+    color: rgb(244 244 245) !important;
+    padding: 0 0.875rem !important;
+    font-size: 0.875rem !important;
+    outline: none !important;
+}
+
+.select2-container--wms .select2-search--dropdown .select2-search__field:focus {
+    border-color: rgb(59 130 246) !important;
+    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.22) !important;
+}
+
+.select2-container--wms .select2-results__options {
+    background: rgb(24 24 27) !important;
+    max-height: 16rem !important;
+}
+
+.select2-container--wms .select2-results__option {
+    padding: 0.75rem 1rem !important;
+    color: rgb(244 244 245) !important;
+    font-size: 0.875rem !important;
+    font-weight: 500 !important;
+}
+
+.select2-container--wms .select2-results__option--highlighted.select2-results__option--selectable {
+    background: rgb(37 99 235) !important;
+    color: white !important;
+}
+
+.select2-container--wms .select2-results__option--selected {
+    background: rgb(30 41 59) !important;
+    color: rgb(191 219 254) !important;
+}
+
+.select2-container--wms .select2-results__option[aria-disabled='true'] {
+    color: rgb(113 113 122) !important;
+}
+
+.select2-container--wms .select2-results__message {
+    color: rgb(161 161 170) !important;
+}

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 () {
+    $('[data-helpdesk-select2], [data-wms-select2]').each(function () {
-        const select = this;
+        const $select = $(this);
-        const $select = $(select);
 
         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,
+            placeholder:
-            dropdownParent: $('body'),
+                $select.data('placeholder') ||
-            sorter: function (data) {
+                $select.find('option[value=""]').first().text() ||
-                return data.sort(function (a, b) {
+                (isMultiple ? 'Select options' : 'Select option'),
-                    return (a.text || '').localeCompare(b.text || '', undefined, {
+            sorter(data) {
-                        sensitivity: 'base',
+                return data.sort((first, second) => first.text.localeCompare(second.text, undefined, {
-                        numeric: true,
+                    sensitivity: 'base',
-                    });
+                    ignorePunctuation: true,
-                });
+                }));
             },
         });
 
-        $select.off('change.wms-select2-livewire');
+        $select.off('change.select2-livewire');
 
-        $select.on('change.wms-select2-livewire', function () {
+        $select.on('change.select2-livewire', function () {
-            setLivewireProperty(select, select.dataset.wireModel, $select.val());
+            setLivewireProperty(this, this.dataset.wireModel, $select.val());
 
-            select.dispatchEvent(
+            this.dispatchEvent(
                 new Event('change', {
                     bubbles: true,
                 })