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

This ensures that it is properly displayed. Fixes issue #1073
This commit is contained in:
Jan Böhmer 2025-10-19 00:34:31 +02:00
parent 1c8ca6c0a2
commit 4c30cab7c1
7 changed files with 41 additions and 8 deletions

View file

@ -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>';

View file

@ -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) => {

View file

@ -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),

View file

@ -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'],
});
}

View file

@ -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',

View file

@ -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},

View file

@ -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) {