Use body element as dropdownParent for tomselect elements

This improves UX
This commit is contained in:
Jan Böhmer 2025-09-06 23:32:08 +02:00
parent 2b28aa8ba9
commit fb92db8c05
7 changed files with 11 additions and 4 deletions

View file

@ -42,6 +42,7 @@ export default class extends Controller {
selectOnTab: true, selectOnTab: true,
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin //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', delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
dropdownParent: 'body',
render: { render: {
item: (data, escape) => { item: (data, escape) => {
return '<span>' + escape(data.label) + '</span>'; return '<span>' + escape(data.label) + '</span>';

View file

@ -16,6 +16,7 @@ export default class extends Controller {
searchField: ["name", "description", "category", "footprint"], searchField: ["name", "description", "category", "footprint"],
valueField: "id", valueField: "id",
labelField: "name", labelField: "name",
dropdownParent: 'body',
preload: "focus", preload: "focus",
render: { render: {
item: (data, escape) => { item: (data, escape) => {

View file

@ -44,6 +44,7 @@ export default class extends Controller {
allowEmptyOption: true, allowEmptyOption: true,
selectOnTab: true, selectOnTab: true,
maxOptions: null, maxOptions: null,
dropdownParent: 'body',
render: { render: {
item: this.renderItem.bind(this), item: this.renderItem.bind(this),

View file

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

View file

@ -50,6 +50,7 @@ export default class extends Controller {
valueField: 'text', valueField: 'text',
searchField: 'text', searchField: 'text',
orderField: 'text', orderField: 'text',
dropdownParent: 'body',
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin //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', delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',

View file

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

View file

@ -43,6 +43,7 @@ export default class extends Controller {
selectOnTab: true, selectOnTab: true,
createOnBlur: true, createOnBlur: true,
create: true, create: true,
dropdownParent: 'body',
}; };
if(this.element.dataset.autocomplete) { if(this.element.dataset.autocomplete) {