Major updates

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

@@ -58,7 +58,7 @@
         >
             <option value=""></option>
             @foreach ($countries as $country)
-                <option value="{{ $country->id }}" @selected((int) old('country_id', $company->country_id) === $country->id)>
+                <option value="{{ $country->id }}" @selected((int) old('country_id', $company->address?->country_id) === $country->id)>
                     {{ $country->display_name ?: $country->common_name ?: $country->name }}
                 </option>
             @endforeach

Modules/Company/Resources/views/partials/address-form.blade.php

@@ -1,6 +1,7 @@
 @php
     $address = $address ?? null;
     $inputClass = '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';
+    $countryFieldId = 'address_country_id_' . md5(($defaultLabel ?? 'address') . '_' . ($address?->id ?? 'new'));
 @endphp
 
 <div class="grid gap-5 md:grid-cols-2">
@@ -45,18 +46,25 @@
     </div>
 
     <div class="wms-select2-field">
-        <label for="address_country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label>
+        <label for="{{ $countryFieldId }}" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">
+            Country
+        </label>
+
         <select
-            id="address_country_id"
+            id="{{ $countryFieldId }}"
             name="country_id"
-            data-wms-select2="true"
+            data-wms-select2
             data-placeholder="Search and select country"
             class="wms-select2-control"
             required
         >
             <option value=""></option>
+
             @foreach ($countries as $country)
-                <option value="{{ $country->id }}" @selected((int) old('country_id', $address?->country_id) === $country->id)>
+                <option
+                    value="{{ $country->id }}"
+                    @selected((int) old('country_id', $address?->country_id) === $country->id)
+                >
                     {{ $country->display_name ?: $country->common_name ?: $country->name }}
                 </option>
             @endforeach

resources/css/wms-select2.css

@@ -1,8 +1,4 @@
-/* WMS Select2 professional dark theme. Imported after Select2 base CSS. */
+/* WMS Select2 professional dark theme. Imported after Select2's own CSS. */
-
-.wms-select2-field {
-    min-width: 0;
-}
 
 .wms-select2-field .select2-container,
 .select2-container--wms {
@@ -15,7 +11,9 @@
 }
 
 .wms-select2-field select[data-wms-select2].select2-hidden-accessible,
-.wms-select2-field select.wms-select2-control.select2-hidden-accessible {
+.wms-select2-field select.wms-select2-control.select2-hidden-accessible,
+select[data-wms-select2].select2-hidden-accessible,
+select.wms-select2-control.select2-hidden-accessible {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
@@ -28,7 +26,6 @@
 }
 
 .select2-container--wms .select2-selection--single {
-    position: relative !important;
     height: 3rem !important;
     min-height: 3rem !important;
     border: 1px solid rgb(63 63 70) !important;
@@ -65,8 +62,9 @@
     position: absolute !important;
     top: 0 !important;
     right: 0.875rem !important;
-    width: 1rem !important;
+    width: 1.5rem !important;
     height: 100% !important;
+    display: block !important;
     background: transparent !important;
     border: 0 !important;
     border-radius: 0 !important;
@@ -74,30 +72,37 @@
 }
 
 .select2-container--wms .select2-selection--single .select2-selection__arrow b {
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    width: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+    transform: translate(-50%, -50%) !important;
     border-color: rgb(212 212 216) transparent transparent transparent !important;
-    border-width: 5px 4px 0 4px !important;
+    border-style: solid !important;
-    margin-left: -4px !important;
+    border-width: 6px 5px 0 5px !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;
+    border-width: 0 5px 6px 5px !important;
 }
 
 .select2-container--wms .select2-selection--single .select2-selection__clear {
     position: absolute !important;
     right: 2.25rem !important;
     top: 0 !important;
-    width: 1rem !important;
     height: 100% !important;
+    width: 1.25rem !important;
+    color: rgb(161 161 170) !important;
+    font-size: 1.25rem !important;
+    line-height: 2.85rem !important;
+    text-align: center !important;
     background: transparent !important;
     border: 0 !important;
     border-radius: 0 !important;
-    color: rgb(161 161 170) !important;
+    box-shadow: none !important;
-    font-size: 1.25rem !important;
-    line-height: 2.875rem !important;
-    text-align: center !important;
 }
 
 .select2-container--wms .select2-selection--single .select2-selection__clear:hover {
@@ -113,12 +118,8 @@
     box-shadow: 0 24px 60px rgb(0 0 0 / 0.45) !important;
 }
 
-.select2-container--wms.select2-container--open .select2-dropdown--below {
+.select2-container--wms .select2-dropdown--below {
-    margin-top: 0.375rem !important;
+    margin-top: 0.35rem !important;
-}
-
-.select2-container--wms.select2-container--open .select2-dropdown--above {
-    margin-top: -0.375rem !important;
 }
 
 .select2-container--wms .select2-search--dropdown {
@@ -135,7 +136,6 @@
     color: rgb(244 244 245) !important;
     padding: 0 0.875rem !important;
     font-size: 0.875rem !important;
-    font-weight: 500 !important;
     outline: none !important;
 }
 
@@ -171,7 +171,7 @@
     color: rgb(161 161 170) !important;
 }
 
-/* Fallback styling before Select2 initialises, matching WMS inputs. */
+/* Fallback before Select2 initialises. */
 .wms-select2-field > select[data-wms-select2],
 .wms-select2-field > select.wms-select2-control {
     margin-top: 0.5rem;

resources/js/app.js

@@ -147,17 +147,17 @@ function livewireComponentFor(element) {
 
     while (current && current !== document.documentElement) {
         if (current.hasAttribute && current.hasAttribute('wire:id')) {
-            break;
+            if (!window.Livewire) {
+                return null;
+            }
+
+            return window.Livewire.find(current.getAttribute('wire:id'));
         }
 
         current = current.parentElement;
     }
 
-    if (!current || !window.Livewire) {
+    return null;
-        return null;
-    }
-
-    return window.Livewire.find(current.getAttribute('wire:id'));
 }
 
 function setLivewireProperty(element, model, value) {
@@ -170,64 +170,112 @@ function setLivewireProperty(element, model, value) {
     component.set(model, value === '' ? null : value);
 }
 
+function normaliseSelect2Options($select) {
+    const isMultiple = $select.prop('multiple');
+    const $field = $select.closest('.wms-select2-field');
+
+    if (!isMultiple && $select.find('option[value=""]').length === 0) {
+        $select.prepend(new Option('', '', false, false));
+    }
+
+    return {
+        theme: 'wms',
+        width: '100%',
+        allowClear: !isMultiple,
+        closeOnSelect: !isMultiple,
+        dropdownAutoWidth: false,
+        minimumResultsForSearch: 0,
+        dropdownParent: $field.length ? $field : window.jQuery(document.body),
+        placeholder:
+            $select.data('placeholder') ||
+            $select.attr('placeholder') ||
+            (isMultiple ? 'Select options' : 'Search and select'),
+        sorter(data) {
+            return data.sort((first, second) =>
+                (first.text || '').localeCompare(second.text || '', undefined, {
+                    sensitivity: 'base',
+                    ignorePunctuation: true,
+                })
+            );
+        },
+    };
+}
+
+function select2Selector() {
+    return 'select[data-wms-select2], select[data-helpdesk-select2], select[data-company-country-select2], select.wms-select2-control';
+}
+
+function initialiseSelect2Element(select) {
+    if (!window.jQuery?.fn?.select2 || !select) {
+        return false;
+    }
+
+    const $select = window.jQuery(select);
+
+    if ($select.hasClass('select2-hidden-accessible')) {
+        return true;
+    }
+
+    $select.select2(normaliseSelect2Options($select));
+
+    $select.off('change.wms-select2-livewire');
+    $select.on('change.wms-select2-livewire', function () {
+        setLivewireProperty(this, this.dataset.wireModel, $select.val());
+    });
+
+    $select.off('select2:open.wms-select2-focus');
+    $select.on('select2:open.wms-select2-focus', function () {
+        window.setTimeout(() => {
+            const search = document.querySelector('.select2-container--open .select2-search__field');
+
+            if (search) {
+                search.focus();
+            }
+        }, 0);
+    });
+
+    return true;
+}
+
 /**
- * Initialise Select2 controls.
+ * Initialise all WMS Select2 controls currently on the page.
  *
  * @returns {void}
  */
 function initialiseSelect2() {
     if (!window.jQuery?.fn?.select2) {
+        window.setTimeout(initialiseSelect2, 100);
         return;
     }
 
-    $('[data-helpdesk-select2], [data-wms-select2], .wms-select2-control').each(function () {
+    document.querySelectorAll(select2Selector()).forEach(initialiseSelect2Element);
-        const select = this;
-        const $select = $(select);
-
-        if ($select.hasClass('select2-hidden-accessible')) {
-            return;
-        }
-
-        const isMultiple = $select.prop('multiple');
-        const placeholder =
-            $select.data('placeholder') ||
-            $select.find('option[value=""]').first().text() ||
-            (isMultiple ? 'Select options' : 'Select option');
-
-        $select.select2({
-            theme: 'wms',
-            width: '100%',
-            minimumResultsForSearch: 0,
-            allowClear: !isMultiple,
-            closeOnSelect: !isMultiple,
-            dropdownAutoWidth: false,
-            placeholder,
-            sorter(data) {
-                return data.sort((first, second) => {
-                    const firstText = (first.text || '').trim();
-                    const secondText = (second.text || '').trim();
-
-                    if (!first.id) return -1;
-                    if (!second.id) return 1;
-
-                    return firstText.localeCompare(secondText, undefined, {
-                        sensitivity: 'base',
-                        ignorePunctuation: true,
-                    });
-                });
-            },
-        });
-
-        $select.off('change.wms-select2-livewire');
-
-        $select.on('change.wms-select2-livewire', function () {
-            setLivewireProperty(this, this.dataset.wireModel, $select.val());
-
-            this.dispatchEvent(new Event('change', { bubbles: true }));
-        });
-    });
 }
 
+/**
+ * Selects inside Livewire/Navigate content can appear after DOMContentLoaded.
+ * Initialise on first interaction as a safety net, then open Select2 immediately.
+ */
+document.addEventListener('mousedown', (event) => {
+    const select = event.target.closest?.(select2Selector());
+
+    if (!select || select.classList.contains('select2-hidden-accessible')) {
+        return;
+    }
+
+    if (initialiseSelect2Element(select)) {
+        event.preventDefault();
+        window.setTimeout(() => window.jQuery(select).select2('open'), 0);
+    }
+}, true);
+
+document.addEventListener('focusin', (event) => {
+    const select = event.target.closest?.(select2Selector());
+
+    if (select) {
+        initialiseSelect2Element(select);
+    }
+}, true);
+
 /**
  * Boot page UI.
  *
@@ -236,14 +284,21 @@ function initialiseSelect2() {
 function bootUi() {
     renderWmsCharts();
     initialiseSelect2();
+
+    window.setTimeout(initialiseSelect2, 50);
+    window.setTimeout(initialiseSelect2, 250);
+    window.setTimeout(initialiseSelect2, 750);
 }
 
 document.addEventListener('DOMContentLoaded', bootUi);
-
 document.addEventListener('livewire:navigated', bootUi);
 
 document.addEventListener('livewire:init', () => {
-    Livewire.hook('morphed', () => {
+    if (!window.Livewire?.hook) {
-        initialiseSelect2();
+        return;
+    }
+
+    window.Livewire.hook('morphed', () => {
+        window.setTimeout(initialiseSelect2, 0);
     });
 });