Do not change the dropdownParent of tomselect if it is inside a modal

This ensures that it is properly displayed. Fixes issue #1073

Author: jbtronics

assets/controllers/elements/attachment_autocomplete_controller.js

@@ -34,6 +34,11 @@ export default class extends Controller {
 
     connect() {
 
+        let dropdownParent = "body";
+        if (this.element.closest('.modal')) {
+            dropdownParent = null
+        }
+
         let settings = {
             persistent: false,
             create: true,
@@ -42,7 +47,7 @@ export default class extends Controller {
             selectOnTab: true,
             //This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
             delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
-            dropdownParent: 'body',
+            dropdownParent: dropdownParent,
             render: {
                 item: (data, escape) => {
                     return '<span>' + escape(data.label) + '</span>';

assets/controllers/elements/part_select_controller.js

@@ -10,13 +10,19 @@ export default class extends Controller {
 
     connect() {
 
+        //Check if tomselect is inside an modal and do not attach the dropdown to body in that case (as it breaks the modal)
+        let dropdownParent = "body";
+        if (this.element.closest('.modal')) {
+            dropdownParent = null
+        }
+
         let settings = {
             allowEmptyOption: true,
             plugins: ['dropdown_input'],
             searchField: ["name", "description", "category", "footprint"],
             valueField: "id",
             labelField: "name",
-            dropdownParent: 'body',
+            dropdownParent: dropdownParent,
             preload: "focus",
             render: {
                 item: (data, escape) => {

assets/controllers/elements/select_controller.js

@@ -38,13 +38,17 @@ export default class extends Controller {
             this._emptyMessage = this.element.getAttribute('title');
         }
 
+        let dropdownParent = "body";
+        if (this.element.closest('.modal')) {
+            dropdownParent = null
+        }
 
         let settings = {
             plugins: ["clear_button"],
             allowEmptyOption: true,
             selectOnTab: true,
             maxOptions: null,
-            dropdownParent: 'body',
+            dropdownParent: dropdownParent,
 
             render: {
                 item: this.renderItem.bind(this),

assets/controllers/elements/select_multiple_controller.js

@@ -26,10 +26,15 @@ export default class extends Controller {
     _tomSelect;
 
     connect() {
+        let dropdownParent = "body";
+        if (this.element.closest('.modal')) {
+            dropdownParent = null
+        }
+
         this._tomSelect = new TomSelect(this.element, {
             maxItems: 1000,
             allowEmptyOption: true,
-            dropdownParent: 'body',
+            dropdownParent: dropdownParent,
             plugins: ['remove_button'],
         });
     }

assets/controllers/elements/static_file_autocomplete_controller.js

@@ -40,6 +40,11 @@ export default class extends Controller {
 
     connect() {
 
+        let dropdownParent = "body";
+        if (this.element.closest('.modal')) {
+            dropdownParent = null
+        }
+
         let settings = {
             persistent: false,
             create: true,
@@ -50,7 +55,7 @@ export default class extends Controller {
             valueField: 'text',
             searchField: 'text',
             orderField: 'text',
-            dropdownParent: 'body',
+            dropdownParent: dropdownParent,
 
             //This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
             delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',

assets/controllers/elements/structural_entity_select_controller.js

@@ -40,7 +40,10 @@ export default class extends Controller {
         const allowAdd = this.element.getAttribute("data-allow-add") === "true";
         const addHint = this.element.getAttribute("data-add-hint") ?? "";
 
-
+        let dropdownParent = "body";
+        if (this.element.closest('.modal')) {
+            dropdownParent = null
+        }
 
 
         let settings = {
@@ -54,7 +57,7 @@ export default class extends Controller {
             maxItems: 1,
             delimiter: "$$VERY_LONG_DELIMITER_THAT_SHOULD_NEVER_APPEAR$$",
             splitOn: null,
-            dropdownParent: 'body',
+            dropdownParent: dropdownParent,
 
             searchField: [
                 {field: "text", weight : 2},

assets/controllers/elements/tagsinput_controller.js

@@ -33,6 +33,11 @@ export default class extends Controller {
     _tomSelect;
 
     connect() {
+        let dropdownParent = "body";
+        if (this.element.closest('.modal')) {
+            dropdownParent = null
+        }
+
         let settings = {
             plugins: {
                 remove_button:{},
@@ -43,7 +48,7 @@ export default class extends Controller {
             selectOnTab: true,
             createOnBlur: true,
             create: true,
-            dropdownParent: 'body',
+            dropdownParent: dropdownParent,
         };
 
         if(this.element.dataset.autocomplete) {