Major updates

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 window.Livewire.find(current.getAttribute('wire:id'));
+    return null;
 }
 
 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 () {
-        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 }));
-        });
-    });
+    document.querySelectorAll(select2Selector()).forEach(initialiseSelect2Element);
 }
 
+/**
+ * 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', () => {
-        initialiseSelect2();
+    if (!window.Livewire?.hook) {
+        return;
+    }
+
+    window.Livewire.hook('morphed', () => {
+        window.setTimeout(initialiseSelect2, 0);
     });
 });