countries selection fixed

resources/js/app.js

@@ -143,9 +143,19 @@ function renderWmsCharts() {
 
 
 function livewireComponentFor(element) {
-    const componentRoot = element.closest('[wire\:id]');
+    if (!element || !window.Livewire) {
+        return null;
+    }
 
-    if (!componentRoot || !window.Livewire) {
+    let componentRoot = null;
+
+    try {
+        componentRoot = element.closest('[wire\\:id]');
+    } catch (error) {
+        componentRoot = null;
+    }
+
+    if (!componentRoot) {
         return null;
     }
 
@@ -167,25 +177,32 @@ function setLivewireProperty(element, model, value) {
  *
  * @returns {void}
  */
-function initialiseSelect2() {
+function initialiseSelect2(root = document) {
     if (!window.jQuery?.fn?.select2) {
         return;
     }
 
-    $('[data-helpdesk-select2], [data-wms-select2], .wms-select2-control').each(function () {
-        const $select = $(this);
+    const $root = root instanceof window.Element ? $(root) : $(document);
+    const selector = 'select[data-helpdesk-select2], select[data-wms-select2], select.wms-select2-control';
+
+    $root.find(selector).add($root.is(selector) ? $root : $()).each(function () {
+        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 === 0) {
+            $select.prepend(new Option('', '', false, false));
+        }
+
         $select.select2({
             theme: 'wms',
             width: '100%',
@@ -201,26 +218,9 @@ function initialiseSelect2() {
             },
         });
 
-        $select.off('select2:open.wms-select2');
-        $select.on('select2:open.wms-select2', function () {
-            const searchField = document.querySelector('.select2-container--open .select2-search__field');
-
-            if (searchField) {
-                searchField.placeholder = placeholder;
-                searchField.focus();
-            }
-        });
-
-        $select.off('change.select2-livewire');
-
-        $select.on('change.select2-livewire', function () {
+        $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,
-                })
-            );
         });
     });
 }
@@ -236,11 +236,28 @@ function bootUi() {
 }
 
 document.addEventListener('DOMContentLoaded', bootUi);
+window.addEventListener('load', bootUi);
+window.addEventListener('pageshow', bootUi);
 
 document.addEventListener('livewire:navigated', bootUi);
 
 document.addEventListener('livewire:init', () => {
-    Livewire.hook('morphed', () => {
-        initialiseSelect2();
+    Livewire.hook('morphed', ({ el }) => {
+        initialiseSelect2(el || document);
     });
 });
+
+const select2Observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+            if (node instanceof window.Element) {
+                initialiseSelect2(node);
+            }
+        });
+    });
+});
+
+select2Observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+});