Use body element as dropdownParent for tomselect elements

This improves UX

Author: jbtronics

assets/controllers/elements/attachment_autocomplete_controller.js

@@ -42,6 +42,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',
             render: {
                 item: (data, escape) => {
                     return '<span>' + escape(data.label) + '</span>';

assets/controllers/elements/part_select_controller.js

@@ -16,6 +16,7 @@ export default class extends Controller {
             searchField: ["name", "description", "category", "footprint"],
             valueField: "id",
             labelField: "name",
+            dropdownParent: 'body',
             preload: "focus",
             render: {
                 item: (data, escape) => {
@@ -71,4 +72,4 @@ export default class extends Controller {
         //Destroy the TomSelect instance
         this._tomSelect.destroy();
     }
-}
+}

assets/controllers/elements/select_controller.js

@@ -44,6 +44,7 @@ export default class extends Controller {
             allowEmptyOption: true,
             selectOnTab: true,
             maxOptions: null,
+            dropdownParent: 'body',
 
             render: {
                 item: this.renderItem.bind(this),
@@ -108,4 +109,4 @@ export default class extends Controller {
         //Destroy the TomSelect instance
         this._tomSelect.destroy();
     }
-}
+}

assets/controllers/elements/select_multiple_controller.js

@@ -29,6 +29,7 @@ export default class extends Controller {
         this._tomSelect = new TomSelect(this.element, {
             maxItems: 1000,
             allowEmptyOption: true,
+            dropdownParent: 'body',
             plugins: ['remove_button'],
         });
     }
@@ -39,4 +40,4 @@ export default class extends Controller {
         this._tomSelect.destroy();
     }
 
-}
+}

assets/controllers/elements/static_file_autocomplete_controller.js

@@ -50,6 +50,7 @@ export default class extends Controller {
             valueField: 'text',
             searchField: 'text',
             orderField: 'text',
+            dropdownParent: 'body',
 
             //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

@@ -54,6 +54,7 @@ export default class extends Controller {
             maxItems: 1,
             delimiter: "$$VERY_LONG_DELIMITER_THAT_SHOULD_NEVER_APPEAR$$",
             splitOn: null,
+            dropdownParent: 'body',
 
             searchField: [
                 {field: "text", weight : 2},

assets/controllers/elements/tagsinput_controller.js

@@ -43,6 +43,7 @@ export default class extends Controller {
             selectOnTab: true,
             createOnBlur: true,
             create: true,
+            dropdownParent: 'body',
         };
 
         if(this.element.dataset.autocomplete) {
@@ -73,4 +74,4 @@ export default class extends Controller {
         //Destroy the TomSelect instance
         this._tomSelect.destroy();
     }
-}
+}