countries selection fixed

resources/js/app.js

@@ -7,11 +7,13 @@ import $ from 'jquery';
 window.$ = $;
 window.jQuery = $;
 
-import attachSelect2 from 'select2';
+import select2Factory from 'select2';
 import 'select2/dist/css/select2.min.css';
 import '../css/wms-select2.css';
 
-attachSelect2(window.jQuery);
+if (typeof select2Factory === 'function') {
+    select2Factory(window, $);
+}
 
 const chartColours = [
     'rgb(8, 145, 178)',
@@ -170,25 +172,27 @@ function initialiseSelect2() {
         return;
     }
 
-    $('[data-helpdesk-select2], [data-wms-select2], [data-company-country-select2]').each(function () {
+    $('[data-helpdesk-select2], [data-wms-select2], .wms-select2-control').each(function () {
         const $select = $(this);
 
         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');
+
         $select.select2({
             theme: 'wms',
             width: '100%',
             allowClear: !isMultiple,
             closeOnSelect: !isMultiple,
             dropdownAutoWidth: false,
-            placeholder:
-                $select.data('placeholder') ||
-                $select.find('option[value=""]').first().text() ||
-                (isMultiple ? 'Select options' : 'Select option'),
+            placeholder,
             sorter(data) {
                 return data.sort((first, second) => first.text.localeCompare(second.text, undefined, {
                     sensitivity: 'base',
@@ -197,6 +201,16 @@ 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 () {