fix: [elements:dropdownField] Always attach select2 to the body

templates/MailingLists/add_individual.php

@@ -10,7 +10,6 @@ echo $this->element('genericElements/Form/genericForm', [
                 'multiple' => true,
                 'select2' => true,
                 'label' => __('Members'),
-                'class' => 'select2-input',
                 'options' => $dropdownData['individuals']
             ],
             [

templates/element/genericElements/Form/Fields/dropdownField.php

@@ -19,7 +19,9 @@ if (!empty($fieldData['label'])) {
 if ($controlParams['options'] instanceof \Cake\ORM\Query) {
     $controlParams['options'] = $controlParams['options']->all()->toList();
 }
-if (!empty($fieldData['select2'])) {
+$initSelect2 = false;
+if (isset($fieldData['select2']) && $fieldData['select2'] == true) {
+    $initSelect2 = true;
     $fieldData['select2'] = $fieldData['select2'] === true ? [] : $fieldData['select2'];
     $controlParams['class'] .= ' select2-input';
 }
@@ -53,8 +55,9 @@ echo $this->FormFieldMassage->prepareFormElement($this->Form, $controlParams, $f
             $select.attr('onclick', 'toggleFreetextSelectField(this)')
             $select.parent().find('input.custom-value').attr('oninput', 'updateAssociatedSelect(this)')
             updateAssociatedSelect($select.parent().find('input.custom-value')[0])
-            <?php if (!empty($fieldData['select2'])) : ?>
-                let $container = $select.closest('.modal-dialog')
+            <?php if ($initSelect2) : ?>
+                // let $container = $select.closest('.modal-dialog .modal-body')
+                let $container = []
                 if ($container.length == 0) {
                     $container = $(document.body)
                 }

templates/element/genericElements/Form/genericForm.php

@@ -155,14 +155,5 @@
         $('.formDropdown').on('change', function() {
             executeStateDependencyChecks('#' + this.id);
         })
-        <?php if (!empty($initSelect2)): ?>
-            <?php
-                $dropdownParent = !empty($seedModal) ? sprintf("$('.modal-dialog.%s .modal-body')", $seedModal) : "$(document.body)";
-            ?>
-            $('select.select2-input').select2({
-                dropdownParent: <?= $dropdownParent ?>,
-                width: '100%',
-            })
-        <?php endif; ?>
     });
 </script>

webroot/css/main.css

@@ -94,7 +94,7 @@ input[type="checkbox"]:disabled.change-cursor {
 }
 
 .select2-container {
-    z-index: 900;
+    z-index: 1060;
 }
 
 .select2-container--bootstrap-5 {